HUMAN COMPUTER INTERACTION

B.TECH III YR II SEMESTER (TERM 08-09)

UNIT 4 PPT SLIDES
TEXT BOOKS:
The essential guide to user interface design,
Wilbert O Galitz, Wiley DreamaTech.
Designing the user interface. 3rd Edition Ben
Shneidermann , Pearson Education Asia.

No. of slides: 62

INDEX
UNIT 4 PPT SLIDES
S.NO.

1.
2.
3.
4.
5.
6.
7.
8.
9.

TOPIC

Screen designing
Screen planning and purpose
organizing screen elements
screen navigation and flow
Visually pleasing composition
focus and emphasis
information retrieval on web
statistical graphics
Technological consideration
in interface design
REVISION

LECTURE NO.

PPTSLIDES

L20

L20.1 to L20.5

L21

L21.1 to L21.4

L22

L22.1 to L22.5

L23

L23.1 to L23.10

L24

L24.1 to L24.11

L25

L25.1 to L25.11

L26

L26.1 to L26.5

L27

L27.1 to L27.5

L28

L28.1 to L28.2

L29

Screen design of the system is effected by

many factors
How much information is presented on the screen
How a screen is organized
The language used in the screen
The distinctiveness of the screen components
Screen consistency with other screen

Screen designing
How to distract the screen user

Unclear captions and badly worded questions

Improper type and graphic emphasis
Misleading headings
Irrelevant and unnecessary content
Back track and rethink of previous answer
Clustered and cramped layout
Poor quality of presentation
Legibility
Appearance
Arrangement
Lecture 20 slide 1

Micro Soft Suggest most common problem

in screen and interface design.

Visual inconsistency
Lack control in the use of design features
Over use of 3D presentations
Overuse of too many bright colors
Bad typography
Metaphors are unpleasant or too cute

Variety of distractions in web screens.

Numerous audio and visual interruptions
Extensive visual clutter
Poor information readability
In comprehensible screen components
Confusing and inefficient navigation
Inefficient operations
Excessive or inefficient page scrolling
Information overload
Design inconsistency
Outdated information
Poor design caused by emulation of printed documents
and past systems
lecture 20 slide 2

What screen users want

Aan orderly clean clutter free appearance
An obvious indication of what is being shown and what
should be done with it.
Expected information located where it should be.
A clear indication of what relates to what.
Plain and simple English
A clear indication of when an action can make a permanent
change in data

Lecture 20 slide 3

What screen users do

Identifies a task to be performed or need to be fulfilled.
Decides how the task will be completed or need fulfilled.
Manipulates the computers controls.
Gathers necessary data.
Forms judgments resulting in decisions relevant to task

lecture 20 slide 4

Interface Design goals

Reduce visual work
Reduce intellectual work
Reduce memory work
Reduce mentor work
Eliminate burdens or instructions

back

Lecture 20 slide 5

Screen meaning and Purpose

Each screen element
Every control
All text
Screen organization
All emphasis
Each color
Every graphic
All screen animation
All forms of feedback
Must
have meaning to screen users
Serve a purpose in performing tasks
Lecture 21 slide 1

organizing screen elements clearly

and meaning fully
Consistency
Provide real world consistency
Provide internal consistency, including:
operational and navigational procedures
visual identity or theme
Component
organization

Presentation
Usage
Locations

Follow the same conventions and rules across all

related interface
Lecture 21 slide 2
Deviate only when there
is clear benefit to user

Lecture 21 slide 4

screen navigation and flow

Provide an ordering of screen information and elements that:
is rhythmic guiding a persons eye through display
encourages natural movement sequences.
minimizes pointer and eye movement distances.

Locate the most important and most frequently used elements

or controls at top left.

Maintain top to bottom , left to right flow.

assist in navigation through a screen by

Aligning elements
Grouping elements
Lecture 22 slide 1
Use of line borders

screen navigation and flow

Through focus and emphasis, sequentially , direct attention to
items that are
critical
Important
Secondary
Peripheral [unimportant]
Tab through window in logical order of displayed information.
Locate command button at the 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.
Lecture 22 slide 2

screen navigation and flow

In establishing eye movement through a
screen, also consider that the eye trends to
move sequentially , for example
From dark areas to light areas
From big objects to little objects
From unusual shapes to common shapes.
From highly saturated colors to unsaturated colors.

These techniques can be initially used o focus

a persons attention
Lecture 22 slide 3

screen navigation and flow

Maintain top to bottom, left to right throgh the
screen.This top to bottom orientation is
recommended for information entry for the
following reasons
Eye movements between items will be shorter.
Control movements between items will be shorter.
Groupings are more obvious perceptually [viewing].
When ones eyes moves away from the screen and
then back, it returns to about same place it left,
even if it is seeking next item in sequence.
Lecture 22 slide 4

screen navigation and flow

Most product style guides recommend a left to right
orientation.
Our earliest display screens reflected this left to right entry
orientation.
Top to bottom orientation is also recommended for
presenting displays of read only information that must be
scanned.

back

Lecture 22 slide 5

Visually Pleasing Composition

Communicates to the person non verbally

It attracts, motivates and distracts
Draw attention
Convey positive message

Visually pleasing composition

Provide visually pleasing composition with the

following qualities
Balance
Symmetry
Regularity
Predictability
Sequentiality
Economy
Unity
proportion
Simplicity
Groupings.
Lecture 23 slide 1

Balance

Provide an equal weight of screen elements, left and right, top and bottom
The opposite of balance is instability , the design elements ready to topple over.

Balance is most often informal or, asymmetrical [irregular] with elements of

different colors, sizes and shapes being positioned to strike the proper
relationships.

Dark colors, unusual shapes, and larger objects are heavier, where as light
colors, regular shapes, and small objects are lighter.

Balance on a screen is accomplished through centring the display itself,

maintaining an equal weighting of components on each side of the horizontal
and vertical axis, and centring titles and illustrations

Web page design, vertical, or left-to-right balance is usually the most important
concept. Web pages are often scrollable, thereby shifting the horizontal, or topto-bottom, balance point as the screen is scrolled. Horizontal balance is
therefore more difficult to maintain.

Balance

Lecture 23 slide 2

Symmetry
Create symmetry by replicating elements
left and right of the screen centreline.
A unit on one side of the centreline is
exactly replicated on the other side.
Our eye tends to perceive something as
more compressed or compact when it is
symmetric.

symmetry

Lecture 23 slide 3

Regularity
Create regularity by establishing standard and
consistently spaced horizontal and vertical
alignment points.
It is also achieved by using similar element sizes,
shapes, colors, and spacing

Regularity

Lecture 23 slide 4

Predictability

Create predictability by being consistent and following conventional

orders or arrangements.

Viewing one screen elements one to predict how another will look.

The opposite of predictability spontaneity suggests no plan and

thus an inability to predict the structure of the remainder of a screen or
the structure of other screens.

Viewing part of a screen enables one to predict how the rest of the
screen will look

screen design predictability is also enhanced through design

consistency.

Predictability

Lecture 23 slide 5

sequentially
Provide sequentially by arranging elements to guide the eye
through the screen an obvious, logical, rhythmic and efficient
manner.
The eye trends to be attracted to :
A brighter element before one less bright
Isolated elements before elements in a group
Graphics before text
Color before black and white
Highly saturated colors before those less saturated.
Dark areas before light areas
Big objects before little objects
Lecture 23 slide 6

Sequentially cont..
A big element before a small one
An unusual shape before a usual one

Economy
Provide economy by using as few styles,
display techniques, and colors as possible.
Economy is the judicious use of display
elements to get the message across as simply
as possible
The opposite is intricacy, the use of many
elements just because they exist

Economy
The effect of intricacy is ornamentation,
which often detracts from clarity.
Economy in screen design means
organize just enough display elements
and techniques to communicate the
desired message.

Lecture 23 slide 8

Unity
Use similar sizes, shapes, or colors for
related information
Leave less space between elements of a
screen than the space left at the margins
The opposite of unity is fragmentation, each
piece retaining its own character.
In screen design, similar sizes, shapes, and
colors promote unity, as does white space
borders at the display boundary.

Lecture 23 slide 9

Proportion (quantity)
Create windows and groupings of data or
text with aesthetically pleasing proportions.
Down through the ages, people and
cultures have had preferred proportional
relationships.
What constitutes beauty in one culture is
not necessarily considered the same by
another culture,

Proportion
but some proportional shapes are found in
abundance today.

Lecture 23 slide 10

Simplicity (Complexity)
Optimize the number of elements on a screen, within
limits of clarity.
Minimize the alignment points, especially horizontal or
columnar.
Provide standard grids of horizontal and vertical lines to
position elements.

Simplicity (Complexity)
The opposite pole on the continuum is
complexity. The scale created may also be
considered
A scale of complexity, with extreme
complexity at one end and minimal
complexity (simplicity) at the other

Simplicity (Complexity)
While the graphics designer usually
considers this concept as simplicity.
We will address it as complexity since it
has been addressed by this term in the
design literature, where an objective
measure of it has been derived.

Lecture 24 slide 1

Simplicity (Complexity)
Bonsiepe (1968), who proposed a method of measuring
the complexity of typographically.
Designed pages through the application of information
theory this measure involves the following steps:
1.Draw a rectangle around each element on a screen,
including captions, controls, headings, data, title, and so
on.
2. Count the number of elements and horizontal
alignment points (the number of columns in which a field,
inscribed by a rectangle, starts).
3. Count the number of elements and vertical alignment
points (the number of rows in which an element,
inscribed by a rectangle, starts).

Simplicity (Complexity)

A complexity calculation using information theory for each screen is

as follows:
Figure 3.10 (original):
22 fields with 6 horizontal (column) alignment points = 41 bits.
22 fields with 20 vertical (row) alignment points = 93 bits.
Overall complexity = 134 bits.
Figure 3.11 (redesigned):
18 fields with 7 horizontal (column) alignment points = 43 bits.
18 fields with 8 vertical (row) alignment points = 53 bits.
Overall complexity = 96 bits.
The redesigned screen is, thus, about 28 percent simpler, or less
complex, than the original screen

Lecture 24 slide 2

Lecture 24 slide 3

Grouping
Provide function grouping for associated elements
Create spatial grouping as closely as possible to five
degree visual angle ( 1.67 inches diameter or about 6 to 7
lines of the text 12 to 14 character width).
Evenly space control with in grouping allowing 1/8 to 1/4
inch between each
Visually reinforce grouping
- Provide adequate separation between grouping
through liberal use of white space.
- Provide line around groups
Provide meaningful title for each grouping.

Lecture 24 slide 4

Lecture 24 slide 5

Perceptual Principle and functional grouping

Use visual organization to create

functional grouping.
Combine visual organization principal in
logic ways.
Avoid visual organization principles that
conflict.

Grouping and white spaces

Provide adequate separation between grouping through
liberal use of white spaces.

For Web pages, carefully consider the trade-off between

screen white space and the requirement for page
scrolling.

Lecture 24 slide 6

Grouping using backgrounds

Incorporate contrasting background for related
information
- The background not have the emphasis of the screen
component. Consider 25% gray screening.
- Reverse higher contrast or emphasizing techniques
for screen components to which attention should be
drawn.

Visual style in webpage design

Maintain a consistent and unified visual
style throughout the pages of an entire
website
Base the visual style on
- The profile and goals of the web site
owner.
- The profiles, tastes and expectations of
the website user.

Lecture 24 slide 7

Lecture 24 slide 8

Lecture 24 slide 9

Lecture 24 slide 10

Lecture 24 slide 11

back

Focus and emphasis

Visually emphasize the
most prominent element
Most important elements
Central idea or focal point

Lecture 25 slide 1

Focus and emphasis

To provide emphasis use techniques such as :
Higher brightness
Reverse polarity
Larger and distinctive font
Underlining
Blinking
Line rulings
Contrasting colors
Larger size
Positioning
Isolation
Distinctiveness

Lecture 25 slide 2

White space

Focus and emphasis

De emphasize less important elements
To
ensure that the emphasis should avoid:
Empahsis too many screen elements are

emphasized.
screen clutter
using too many emphasize techniques
In webpage design:

Call attentation to new or changed content.

Ensure that page text is not overwhelmed by page background.

Lecture 25 slide 3

Font Types and Families

In typography, by definition the typeface is
the name of the type such as Verdana.
Use simple, common, readable fonts.
- Any sans serif as Helvetica or Verdana
- Time Roman
Use no more than two families
- Assign a separate purpose to each family
- Allow one family to dominate

Font Types and Families cont

To mix type face of family do the following :
- Never mix the family with same race.
- Assign separate purpose to each family.
- Allow one family to dominate.

Lecture 25 slide 4

Lecture 25 slide 5

Lecture 25 slide 6

Font case
Use mixed-case for :
- Control caption.
- Data.
- Control choice description.
- Text.
- Information messages
- Instructional information
- Menu descriptions
- Button description

Font case (Cont)

Consider using upper case or capitalization:
- Title
- Section heading
- Caution and warning messages
- Words or phrases small in point size
Use all lower case with caution.

Defaults
For graphical operating system, use the
standard system fonts.
For web page design for the default browser
fonts.
Consider that the user may change the fonts.

Consistency
Establish a consistent hierarchy and convention for
using typefaces, styles and sizes.
Decide on font for each different level of importance
in hierarchy
Communicate hierarchy with changes in:
Size
Weight
Color

Other
Always consider the visual capabilities of
the user
Always verify the design has succeeded
using the selected fonts

Paper versus Screen reading

Provide a facility for printing out a hard
copy of documents

Screen Elements Caption and Labels

Identify the control with captions or labels
Fully spell them out in a language meaningful to
the user
Display them in normal intensity
Use a mixed case font
Capitalize the first letter of each significant word.
End each caption with a colon
Choose distinct caption that can be easily
distinguished from other caption.

Data Fields:
For entry or modification data fields, display
with in:
- A line box.
- A reverse polarity
For a inquiry or display/read-only screens,
display the data on the normal background
Visually emphasize the data fields

Lecture 25 slide 8

Lecture 25 slide 9

Lecture 25 slide 10

Lecture 25 slide 11

back

Special Symbols
Consider special symbol for emphasis
Separate symbols from words by a space

Control section heading

Provide a meaningful heading that clearly describe the
relationship of grouped control
Locate the section heading above their related screen
controls.
Alternatively heading may be located within a border
surrounding a grouping, justified to the upper-left corner
Indent the control caption to the right of the start of the
heading
Fully spell out the upper case font
Display in normal intensity
Alternatively , if a different size font or style exist the heading
may be displayed in mixed case using heading style.

Control Section subheading or row heading

Web page heading

Control Heading:
For grouping of controls, follow the control section
heading.

Page and Text Heading:

Provide a meaningful page heading that clearly
describe the content and nature of the page that
follows.
Provide a meaning full text heading and subsection
headings that clearly describes the content and
nature of the text that follows.
Establish a hierarchy of font styles, sizes, and weights
depend upon the organization created and the
important text content.

Web page heading

Settle on as few sizes and styles as necessary
to communicate page content and organization
to the user.
Do not randomly mix heading levels or skip
heading levels.

Information retrieval on web

The most sought after web commodity is content.
Behavior is often goal driven.
Reading is no longer a linear activity.
Impatience.
Frequent switching of purpose.
Web users access site for different reasons: a focused search
for a piece of information or an answer less focused for
browsing or surf.
High tech capabilities , fancy graphics do not compensable for
inefficient or poor content.
Lecture 26 slide 1

 Initial focus on attention

Page perusal
Scanning guidelines
Browsing
Browisng guidelines
Searching
Problems with search facilities
Search facility guidelines
Express the search
Progressive search refinement
Launch the search
Present meaningful results

Lecture 26 slide 2

Scanning guidelines
Organization
Minimize eye movement
Provide groupings of information
Organize contenet in a logical and obvious way.

Writing
Provide meaningful headings and subheadings.
Provide meaningful titles
Concisely write the text.
Use bullets/ numbers
Array information in tables

Presentation
Key information in words or phrases
Lecture 26 slide 3
Important concepts

Browsing guidelines
Facilitate scanning
Provide multiple layers of structure
Make navigation easy
Respect users desire to leave
Upon returning help users reorient themselves.
Users can browse deeply or simply move on.
Provide guidance to help reorientation
Understand terms to minimize te need for users to switch
context.

Lecture 26 slide 4

Problems with searching

Not understanding the user.
Difficulties in formulating the search.
Difficulties in presenting meaningful results.
Identify the level of expertise of user.

Know the search user

Plan for users switchig purposes during search
process.
Plan for flexibility in the search process.
Anticipate
nature of every possible query
Kind of information desired
How much information will result the search.
back

Lecture 26 slide 5

statistical graphics
A statistical graphic is data presented in a graphical format.
A well designed statistical graphic also referred to as chart or
graph, consists of complex ideas communicated with clarity,
precision and efficiency.
It will provide coherence to large amount of information by
trying them together in a meaningful way, and it will encourage
data comparisons of its different pieces of eye.

Lecture 27 slide 1

 Scales and shading

- place ticks to marks scales on the outside edge of each axis.
- employ a linear scale.
- mark scales at standard or customary intervals
- Start a numeric scale at zero.
- display only a single scale on axis.
- provide aids for scale interpretation.
- clearly label each axis.
- Provide scaling consistency
- consider duplicate axis for large scale data.
- Proportion
- Lines
- Labeling
- Title
- Interpretation of numbers
Lecture 27 slide 2

Types of statistical graphs

curve and line graphs
Single graph
Four or five maximum
Label identification
Legend
Tightly packed curves
Important or critical data
Comparing actual and projected data
Data differences

Surface charts
Ordering
Coding schemes
Labels
Lecture 27 slide 3

Scatter plots
two dimensions
Consistent intervals
multiple data sets
Significant points

Bar graphs
consistent orientation
Meaningful organization
Bar spacing
Differentiation
Important or critical data
Related bar ordering
Reference index
labeling
Lecture 27

slide 4

Segmented or stacked bars.

Data category ordering
Large segments
Coding schemes
labeling

Flow charts
Order of stps
Orientation
Coding conventions
Arrows
Highlighting
One decission at each step
Consistently order and word all choices

Pie chart
back

Lecture 27 slide 5

Technological consideration -interface design

Graphical systems
Screen design must be compatible with the
capabilities of the system
system power
Screen size
Screen resolution
Display colors
Other display features

Lecture 28 slide 1

 Screen design must be compatible with the

capabilities of the
Platform compatibility
development and implementation
Platform style guide

browser
compatibility
monitor size and resolution
fonts
Color
Bandwidth
Version

other considerations
Downloading
Currency
Page printing
Maintainability
Lecture 28 slide 2