Human Computer

Interface

KCS058
RCS073

Shalu Gupta, CS Dept,

MGMCOET
 DETAILED SYLLABUS
Unit 3
Screen Designing : Design goals –
Screen planning and purpose, 8
organizing screen elements,
ordering of screen data and content –
screen navigation and flow – Visually
pleasing composition –amount of
information – focus and emphasis –
presentation information simply and
meaningfully –
information retrieval on web –
statistical graphics – Technological
consideration in interface
design.

Shalu Gupta, CS Dept,

MGMCOET
 Screen designing
• How to distract the screen user
➢ Unclear captions
➢ Improper type and
graphic emphasis
➢ Misleading headings
➢ Irrelevant and
unnecessary headings
➢ Inefficient results
➢ Clustered and cramped
layout
➢ Poor quality of
presentation
✓ Legibility
✓ Appearance
✓ arrangeemnt
➢ Visual inconsistency
➢ Lack of design features
➢ Over use of 3D
presentations
➢ Overuse of too many
bright colors
➢ Bad typographyShalu Gupta, CS Dept,
MGMCOET
Variety of distractions
➢ 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 in cosistency
➢ Outdated information

Shalu Gupta, CS Dept,

MGMCOET
What screen users
want
➢ an 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

Shalu Gupta, CS Dept,

MGMCOET
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

Shalu Gupta, CS Dept,

MGMCOET
Design goals
➢ Reduce visual work
➢ Reduce intellectual work
➢ Reduce memory work
➢ Reduce mentor work
➢ Eliminate burdens or instructions

Shalu Gupta, CS Dept,

MGMCOET
 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

Shalu Gupta, CS Dept,

MGMCOET
Organizing screen elements
• Consistency
➢ Provide real world consistency
➢ Provide internal consistency
✓ operational and navigational
procedures
✓ visual identity or theme
✓ Componenet
❑ organization
❑ Presentation
❑ Usage
❑ Locations
➢ Follow the same conventions
➢ Deviate only when there is clear
benefit to user

Shalu Gupta, CS Dept,

MGMCOET
 Ordering of screen data &
content
• Divide information into units that are
logical,meaningful and sensible.
• Organize by interrelationships between data
or information.
• Provide an ordering of screen units of
elements depending on
priority.
• Possible ordering schemes include
➢ Conventional
➢ Sequence of use
➢ Frequency of use
➢ Function
➢ Importance
➢ General to specific

Shalu Gupta, CS Dept,

MGMCOET
 Ordering of screen data &
content
• form groups that cover all possibilities.
• Ensure that information is visible.
• Ensure that only information relative to task
is presented on
screen.
• organizational scheme is to minimize
number of information variables.

• UPPER LEFT STARTING POINT

➢ provide an obvious starting point in the
screen’s upper left
corner.

Shalu Gupta, CS Dept,

MGMCOET
 screen navigation and flow
• Provide an ordering of screen information and
elements that:
➢ is rhythmic guiding a person’s 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
➢ Use of line borders
Shalu Gupta, CS Dept,
MGMCOET
 screen navigation and flow
• Through focus and emphasis, sequentially ,
direct attention to items that are
➢ critical
➢ Important
➢ Secondary
➢ Peripheral
• 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.

Shalu Gupta, CS Dept,

MGMCOET
 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
person’s attention
Shalu Gupta, CS Dept,
MGMCOET
 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.
➢ When one’s eyes moves away from
the screen and then back, it returns
to about same place it left, even if it
Shalu Gupta, CS Dept,
is seeking nextMGMCOET
item in sequence.
 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 tht must be
scanned.

Shalu Gupta, CS Dept,

MGMCOET
 Visually pleasing
composition
• Provide visually pleasing
composition with the following
qualities –
➢ balance
➢ Symmetry
➢ Regularity
➢ Predictability
➢ Sequentiality
➢ Economy
➢ Unity
➢ proportion
➢ Simplicity
➢ Groupings.

Shalu Gupta, CS Dept,

MGMCOET
Balance

Shalu Gupta, CS Dept,

MGMCOET
symmetry

Shalu Gupta, CS Dept,

MGMCOET
Regularity

Shalu Gupta, CS Dept,

MGMCOET
Predictability

Shalu Gupta, CS Dept,

MGMCOET
 Sequentially
• 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
• A big element before a small one
• An unusual shape before a usual one
• Big objects before little objects

Shalu Gupta, CS Dept,

MGMCOET
Shalu Gupta, CS Dept,
MGMCOET
Shalu Gupta, CS Dept,
MGMCOET
Shalu Gupta, CS Dept,
MGMCOET
Shalu Gupta, CS Dept,
MGMCOET
Shalu Gupta, CS Dept,
MGMCOET
Shalu Gupta, CS Dept,
MGMCOET
Shalu Gupta, CS Dept,
MGMCOET
Shalu Gupta, CS Dept,
MGMCOET
Shalu Gupta, CS Dept,
MGMCOET
 Grouping using
borders
• Provide functional groupings
• Create spatial groupings
• Provide meaningful titles for aech
grouping
• Incorporate line borders
• Do not exceed three line thickness
• Create lines consistent in height and
length
• For adjacent groupings with borders
whereever possible
• Use rules and borders sparingly

Shalu Gupta, CS Dept,

MGMCOET
Shalu Gupta, CS Dept,
MGMCOET
Shalu Gupta, CS Dept,
MGMCOET
Shalu Gupta, CS Dept,
MGMCOET
Shalu Gupta, CS Dept,
MGMCOET
 Shalu Gupta, CS Dept,
MGMCOET
bac
 Focus and emphasis
➢ Visually emphasize the
✓ most prominent element
✓ Most important elements
✓ Central idea or focal point
➢ De emphasize less important elements
➢ To ensure that
✓ too many screen elements are
emphasized.
✓ screen clutter
✓ using too many emphasize techniques

Shalu Gupta, CS Dept,

MGMCOET
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
✓ White space

Shalu Gupta, CS Dept,

MGMCOET
Shalu Gupta, CS Dept,
MGMCOET
Shalu Gupta, CS Dept,
MGMCOET
Shalu Gupta, CS Dept,
MGMCOET
Shalu Gupta, CS Dept,
MGMCOET
Shalu Gupta, CS Dept,
MGMCOET
Shalu Gupta, CS Dept,
MGMCOET
Shalu Gupta, CS Dept,
MGMCOET
Shalu Gupta, CS Dept,
MGMCOET
 Shalu Gupta, CS Dept,
➢ ba MGMCOET
 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.

Shalu Gupta, CS Dept,

MGMCOET
• 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

Shalu Gupta, CS Dept,

MGMCOET
 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
– Important concepts
Shalu Gupta, CS Dept,
MGMCOET
 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.

Shalu Gupta, CS Dept,

MGMCOET
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 user’s 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 Shalu Gupta, CS Dept,

MGMCOET
Statistical graphics
• A statistical graphic is data presented in a
graphical format.
• A well designed statistical graphic also
refered to as chart or graph.
• Use of statistical graphics

• - reserve for material that is rich,

complex orData Presentation
• emphasize the data
• Minimize non data elements
• Minimize redundant data
• Fill the graph’s available area with
data.
• Show data variation
• Provide proper context for data
interpretation
Shalu Gupta, CS Dept,
MGMCOET
• 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

Shalu Gupta, CS Dept,

MGMCOET
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

Shalu Gupta, CS Dept,

MGMCOET
➢ 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

Shalu Gupta, CS Dept,

MGMCOET
➢ 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

Shalu Gupta, CS Dept,

MGMCOET
 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

Shalu Gupta, CS Dept,

MGMCOET
• 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

Shalu Gupta, CS Dept,

MGMCOET