3-2G (CS/IT-Sem-7) Screen Designing

3
PART1
Screen Designing: Design Goals.

Questions-Answers
UNIT
Screen Designin
Long Answer 1ype and Mledium Answer Type Questions

Que 3.1.What is sereen design ? Define a well designed screen.

CONTENTS Answer
1. Screen design describes the design of graphical user interface.
Part-1 Screen Designing ************** * * * * * * * * * * ' *.
**. 3-2G to 3-20 2. Screen design includes wide variety of applications where
a screens or

Design Goals displays can be used as part of human machine interaction.

Screen Planning and Purpose,. 3-2G to A well-designed screen:
Part-2 ************

3-3G Reflects the capabilities, needs, and tasks of its users.

Organizing Sereen Elements 1.
2. Is developed within the physical constraints imposed by the hardware
Part-3 Ordering of Sereen Data. . .
3-4G to 3-6G on which it is displayed.
and Content, Screen
3. Effectively utilizes the capabilities of its controling software.
Navigation and Flow
4. Achieves the business objectives of the system for which it is designed.
Part-4 Visually Pleasing Composition, 3-6G to 3-14G
Amount of Information Que 3.2.Describethe goals in screen design.
Part-5 : Focus and Emphasis, ...
******************* 3-14G to 3-20G Answer
Presentation Information
Simply and Meaningfully Goals of screen design:
Part-6 i Reduce visual work.
Information Retrieval
Statistical Graphics
on
Web,.. 3-20G to . Reduce intellectual work.
ii. Reduce memory work.
Part-7
Technological Considerations .
in Interface Design 3-28G to 3-33G
iv. Reduce motor work.
V. Minimize or eliminate any burdens or instructions
imposed by technology.

PART-2 |
Screen Planning and Purpose, Organizing Screen Elements.

Questions-Answers
Long Answer Type and Medium Answer Type
3-1G (CST-Sem-7) Questionns
 3-3G em
Human Computer Interface

it purpose,
3-4G (CS/IT-Sem-7) Screen Designing
define
sereen
and
is meant
by
What
Que 3.3.

screen organizat:
PART-3
Answer control, all
text, the Ordering of Screen Data and Content, Screen
element (every each a
s c r e e n animation,
Each s c r e e n all Navigation and Flow.
1. color, every graphic, to u s e r s and serve a n
emphasis, each have meaning
feedback) must
all forms of needs.
tasks o r fulfilling
in performing
do not include it on the. the screen Questions-Answers
element does
not have meaning,
2 If an noise.
because it is Long Answer Type and Medium Aniswer Type Questions
the s c r e e n user's attention
competes for
3. Noise is distracting, That which is important w:l b
information overload.
to
contributes

more
dificult to find.
Que 3.5. Describe ordering of screen data and content.
screen elements clearly
Que 3.4. | How we can organize and
an

Answer
meaningfully?
Ordering of sereen data and content:
Answer 1. An organizational scheme's goal is to keep to a minimum the number of
and meaningfully: information variables that the user must retain in short term memory.
Organizing screen elements clearly
2. A logical, meaningful, and sensible arrangement of screen data and
1 Visual clarity is achieved when thedisplayelements are organized an
content will lower this memory requirement.
presented in meaningful and understandable ways.
3. In ordering screens or pages, units of information and screen elements
A clear and clean organization makes it easier to recognize screen's should be prioritized according to the user's needs and
essential elements and to ignore its secondary information when expectations.
appropriate.
4. People develop expectations on how to accomplish certain tasks and find
different types of information.
3. Clarity is influenced by a multitude of factors such as consistency in 5. Ameaningful organization permits faster graphical system.
design, a visually pleasing composition, a logical and sequential ordering
6. In website design, it is also easier to
the presentation of the proper amount of
information, groupings, and develop a clear navigation system if
the site is meaningfully
alignment of screen items. organized.
7. Clear organization also makes it easier for web users to find what
Consistency: need, and to
they
predict where a navigation link will take them.
1 Provide real-world
consistency Reflect
expectations, work conventions, and cultural
a
person's experiences Ordering schemes include the following:
2.
conventions. i. Conventional
Provide internal
rules for all aspects consistency: Observe the same conventions a 1. Through convention and custom, some ordering schemes have
of an interface screen, and all application or websilk evolved for certain elements.
screens, including:
i 2. Examples are by days of the week, by months of the year, by one's
Operational and navigational
. Visual identity or theme. procedures. name and address, or along a timeline.
3. These elements shouldalways be ordered in the customary way.
ii. Component.
ii. Sequence of use:
3. Follow the same
4 Deviate only whenconventions and rules across all related
1. Sequence of use grouping involves arranging information items in
there is clear a interra
benefit for the
the order in which they are
in natural groups.
commonly received or transmitted, or
user.
 3-5G (CSIT-Se Screen Designing
Human Computer Interface

3 - 6 G (CS/IT-Sem-7

1s
normalygaven
street, city, state
by street.
the logical order of
the information
for example, a s c r e e n in
tab through tab order
at the end of the
address,
An 5. Always
2. locate command buttons
zipcode.
grouping is league stan
the league displayed, and
example of naturalorder ofbest
bes to worst records sequence.
Another in s c r e e n items
should be obvious,
3 appearing movement between
football teams, 6. The direction of
consistent, and rhythmic.
ofuse on the ori
based or caused to
wander long
ii.
Frequency

Frequency of
use is a design
technique
ould be
shou
nciple th 7. The eye, or pointer,
should not be forced
the next item.
1. items used grouped at
most frequently distances about the display seeking
formed through
frequently usediitems grouper s c r e e n with lines
information
most De the
beginning,
the second 8. The eye can be guided through
and display elements.
and so forth. use of white space
and navigation
will also minimize s c r e e n scanning
iv. Function or category: 9. Aligning elements
grouped according
to their purpose
1 Information items
are or movements.
also consider that the
some common parameter. In establishing eye
movement through a screen,
10.
insurance coverage, tor example, mav tends to m o v e sequentially, for example
2 All items pertaining to nay eye
areas to light a r e a s .
i. From dark
placed in one location.
vehicles may be grouped within the categories i.
From big objects to little objects
3. Transportation
shapes to common shapes.
planes, trains, and automobiles. i. From unusual
unsaturated colors.
Such grouping also alows convenient group identification usine From highly saturated colors to
iv.
headings for the user.
5. Sub-categories with sub-headings my also be established. PART-4 1
Information.
v. Importance: Visually Pleasing Composition, Amount of
1. Importance grouping is based on the information's importance t
the user's task or need.
Questions-Answers
2. Important items are placed first or in the most prominent position
3. Items may be organized from best to worst or
largest to smallest Long Answer Type and Medium Answer Type Questions
vi. General to specific:
1 If some data is more
general than others, the general element
should precede the
specific elements. Que 3.7. What do you understand by visually pleasing composition?
2 This will
usually occur when there is a hierarchical
among data elements. This is a
relations
common Web site Answer
scheme. organizauu
1. Visually pleasing composition draws attention subliminally, conveyinga
Que 3.6.What do you mean positive message clearly and quickly.
screen
navigation and flowE 2. A lack of visually pleasing composition is disorienting, obscures
the
Answer intent and meaning, slows one down and confuses one.
1 Sereen navigation
should
be obvious and easy to 3. Graphic design experts have, through perceptual research, derived a
2.
Navigation
and
can be
made obvious
by accomplish. number of principles for what constitutes a visually pieasing appearance.

3.
judiciously using line borders grouping
to
and aligning screen
co
The visually pleasing composition does not focus on the words on the

Sequentially, direct person's a

guide the eye. screen, but onthe perception of structure created by such qualities as
importance. attention to elements in terms of the spacing, shapes, intensities, and colors, and the relationship of screen
4.
Using the various terms elements to one another.
important parts of display
screen. techniques, focus attention
a
on
on the m0
Human Computer Interface
3-7G (CSIT-S
I t is as ifthe sereen were viewed rough "squinted e
words themselves to become a blur.
yes
TSen
It include following qualities: ausing 3-8G (CS/IT-Sem-7)
Screen Designing
L Balanee: 4 Predictability:

Balance is stabilization or equilibrium, a midwas Predictability suggests highly conventional

a
suspension. way center, i.
Viewing part of screen enables one
a
order plan. or

screen will look. to predict how the rest of the

The design elements have an equal
weight, left to
to ri
bottom.
right, top ii. The opposite of
and thus an predictability is spontaneity that suggests no
ii The opposite of balance is instability; the
design inability to plan
screen or the structure predict the structure of the remainder of a
ready to topple over. elements
ements seeming o.
of other screens.
iv. In screen
iv. Our discomfort with
instability, or design, predictability is also
time we straighten a imbalance, is consistency. enhanced through design
picture hanging askew on thereflectad 5. Economy:
.Balance is most often even wall
informal
different colors, sizes and
or
asymmetrical, with Economy, is the frugal and judicious use of
proper relationships. shapes being positioned toeleman
nentss the message across as display elements to get
vi.
strike ke the use of simply as possible. The
many elements opposite is intricacy,
Dark colors, unusual just because they exist.
whereas light colors, shapes, and larger 1. The effect of
intricacy is ornamentation, which often
vii. regular shapes, and smallobjects are "bheavi clarity. detracts from
Balance on a screen is objects
accomplished through centering theight
are ii.
itself, Economy in screen
of the maintaining equal weighting of
an design means mobilizing just
components on displas
elements and enough displáy
horizontal and vertical axis, techniques to
communicate the desired
illustrations. and each sid and no more.
message,
2 Symmetry: centering titles an 6. Unity:
i i. Unity is
Symmetry is axial coherence, totality of elements that is
a
is
exactly replicatedduplication.
on the
Aunit on one side
of the ii.
piece.
With
visually all one
i The exact other side. centerline unity,the elements seem
replication
that balance creates formal
to
completely that they are seen as onebelong together, to dovetail so
can be balance, but the fragmentation, thing. The opposite of unity is
ii.
Symmetry's oppositeachieved
is
without
symmetry. difference is ii. In sereen
each piece
retaining
its
design similar sizes, shapes, and character.
own
something as
more asymmetry. Our eye does white colors promote unity, as
3
iv.
Asymmetrie
Regularity:
compressed
arrays are
or tends
compact when it is to perceive iv.
space borders at the
display boundary.
Unity should exist between related
i.
perceived larger.as symmetric. as well. screens, and web site screens,
Regularity is a 7. Sequentiality:
plan. uniformity of elements based Sequentiality is plan of a
Regularity
and
in sereen
on some
principle or screen in presentation to guide the eye through the
logical, rhythmic
a

consistently spaceddesign
elements.
is
column achieved by information significantly placed.order, with the most
important
1. It is also and row establishing standaru ii.
Sequentiality can be achieved
and spacing.achieved by using starting points for seree ii. The
by alignment, spacing, and
iv. elements similar in
opposite of sequentiality is grouping&
randomness, whereby an
The arrangement and flow cannot be detected.
plan opposite of size, shape, lor, 8.
Simplicity:
A
or
principleregularity
critical element
is is co
apparent. irregularity that exists when no such Simplicity is directness and
not regularized. on a elements that results singleness of form, combination of
a
screen will stand s pattern.
in ease of
comprehending the meaning of
out better, . The opposite
a

however, ifitis pole on the continuum is

complexity.
 3-9G (CSATR.
H u m a n C o m p u t e rI n t e r f a c e

Screen Designing
be
red aa scale of complexity
considered
scalo.
3-10 G (CS/IT-Sem-7)

scale
created
ninimal
mayalsoendand m i complexity (simp
w
The at o n e
i complexity

extreme
Answer 1
at the other.

stru
. Lineborders:
Grouping:
elements aids form.
in establishing ure, eaning i Line borders, or rules, can greatly enhance a sereen.
i
Groupingscreen
and
meaningtul
i. Research has found that information displayed with a border around
sthetic appeal, past research has it is easier to read, better in appearance, and preferable.
relationships,
aesthe

in : foy
providing
to recall nd results
ii. While many groupings are obvious without borders, borders certainly
addition
i In in
information

aids
that grouping reinforce their existence.
screen search.

that iv. Lines or rules assist in focusing attention on related information.

the perceptual
principles can
be used
They also aid in separating groupings of information from
Discuss
Que 38. v.
one

funetional groupings. another.

aid sereen

vi. Draw borders around elements to be grouped.

Answer
vii. Microsoft Windows provides a control called the Group Box to
can be used to aid screen functional groupina
Perceptual principles establish a frame around a group of related controls.
create functional grouping:
L Use visual organization to 2 Line thickness variations
perceptual principle used in screen
i The most common

visual groupings has been the proximity principle. esigntoa Too many variations in line thickness on a screen create clutter
and are distracting. Use no more than three line weights at one
i The incorporation of adequate spacing between groups ofrelat time, or two different styles.
elements enhances the "togetherness" of each grouping. i Use a standard hierarchy for rules, the thickest to differentiate
i Space should always be considered a design component of a screeeen major components, the thinnest for minor separation.
iv. The objective should never be to get rid of it. ii. Consider a thin border for individual controls, a slightly thicker
v. The similarity principle can be used to call attention to border for groupings, and the thickest borders for windows
groupings by displaying them in a different intensity, font vario themselves.
color. style, a 3. Consistent line widths and heights:
vi. The closure and
matching patterns principles involve using lines i Similarly, variations in line widths and heights are distracting.
borders, and unique symbols to
information. identify and relate commo ii. Create horizontal lines of equal widths across the screen and vertical
lines of equal height whenever possible. This will
2 Combine visual provide better
i Visual
organization principles in logical ways: balance.
organization principles can be combined to 4
Sufficientspace padding:
i.
Proximity, a
enhance groupmg When placing information within borders
very 1.
through an array strong perceptual leave, sufficient space
information to principle, guide the e
of can between the information and the borders themselves.
direction. be scanned in a
1. partieus i. Avoid looking like you are trying to stuff 6 pounds into a 5-pound
Scanning direction can also be sack.
(color, intensity, and made obvious
3. Avoid
visual
so on) or
matching through simila 5. Alignment:

organization patterns (lines or borar

i.
Principles principles that i For adjacent groupings with borders, whenever possible, align the
may not conflict: borders left, right, top, and bottom.
i.
When the viewer always be compatible, however. The most important
Que encounters alignment points are left and top.
3.9.How to group screen incompatibilities,s, confusio
confusion results ii. Do not create right and bottom
white space within the area
alignment by leaving excessive
elements using border? visually appealing.
encompassed by the border. This is not
 3-11 G (CS/TT-Sem. 3-12 G (CS/AT-Sem-7) Screen Designing

Overall density :Overall density is a measure of the

H u m a n C o m p u t e rI n t e r t a c e

a.
clutter
and can Dercentage of character positions on the entire screen
sparingly:

create
also
borders screen

lines and borders

on a containing data.
linesand
& U s e

be used sno Local density: Local density is a measure of how "tightly

Too many
be distracting

technique,
linesand
borders
must
sparingly b.
packed" the screen is.
Likeanydisplay
i s as
lines as sseparators
enas
following:
7. Web p a g e s : cautious inusing
horizontal
Que 3.11.Discuss the
design be i. Webpage size
i In Web page of the
between page sections the bottom paging
have
reached page, ii.
Scrolling and
assume they
Users may
i missing what follows.
look more cluttered Answer
the screen

also make
iWebpage size:Webpage design depends on the
lines may where
following:
i Separator
horizontal
lines for situations
the
In general,
reserve
must be emphasized. Minimize page length:
iv. areas 1.
between adjacent three screens of information.
difference
a. Restrict to two or
information.
Discuss amount
of
b. Page length can be longer.
shorter or
Que 3.10.
information at the very top:
2. Place critical o r important
where it will be
Answer
a.
Critical or important information should be placed
1 Proper amount of information: immediately visible when the page is displayed.
information on a screen
is confusing; there
Presenting too much "above the fold".
i
a screen's components for a b. In webpage design, this is referred to as
will be greater competition among
person's attention. C. Locate it within the top 4 inches of page.
structure will be ii. Scrolling and paging:
Visual search times will be longer, and meaningful
the to move between
In screen design the favored method of asking
more difficult to perceive. user
1.
i Presenting too little information is inefficient and may tax a person's screens of information has been through paging.
as information contained on multiple screens may have to Afull screen of information is presented, the user does
what is necessary
memory
be remembered.
2 is transmitted through a
to do to the sereen, and then the entire screen
2 Present all necessary infornmation: key action.
i Ingeneral, present all information necessary for performing an 3. If other user actions are then necessary to accomplish an objective,
another full screen is presented and the process continues until
action or making a decision on one screen. an

i ending is reached.
Ifinformation located on different screens must be
remembered,a
person's memory will again be taxed. 4. This method of interaction was practical and efficient for computer and
i. Developing a screen with all the necessary information requires monitor technology existing at that time, and it presented the user
careful analysis of the user's tasks. consistent and meaningful "chunks" of information to work on.
3. Screen density: time
5. Screen as an interaction method was also used over this
scrolling
i Density is a caleulation of the period but on a much more limited basis.
positions on the screen, or an proportion
area of the
of display character
6. User performance is improved using paging and scrolling.
something. screen containing
i. .There are possible ways to control and view a scrolling screen:
two
Density is clearly related to of
much is there". complexity, since both measures "how a. Telescope method: In the telescope method, the model is that
ii. a telescope, the window moves around the screen data much as a
Complexity looks at elements, telescope scans the stars in the night sky.
rise and fall
together. density at characters, so they shoula
data
iv. There are two b. Microscope method : In the microscope method, the screen
types of density to be appears to move under a fixed viewing window, the way
an object
calculated on a screen
 3-13 G (CS/TT-Se
Human ComputerInterface
m-i 3-14 G (Cs/IT-Sem-7)
Screen Designing
to
moved
around
see it in
under a
microscope
is
manually
it ii. This is extremely cumbersome and inefficient.
placed fewer err
entirety. natural
and
causes
rors, and i 5.
Encourage use of paging:
method is
more

Full-screen paging on the Web can be done by using the page-up

The telescope i
8 was implemented. the up a r r o w
on the
the scrollba
s
and page-down keys or clicking on the scroll bar page-up or page-
today, clicking
when scrolling m o v e downward down icons.
s c r e e n to
This is why, on a
9. displayed which the d . Text is then moved by the number of lines equaling sereen size.
causes

10. The
the data

data is not actualy moving, the

telescope through
dataiu ii. This is almost always faster than scrolling a line at a time.
upward.
viewed is moving
being iv. Some recent studies have addressed the issue of Web page scrolling
in scrolling ?
minimize the problems and paging
How to
Que 3.12. 6. Paging version:
Answer i. Ensure the availability of full pages for reading and searching on
minimize the problems
in scrolling: the Web and, by creating a second version of a website, one consisting
To
contents: of individual screens that are viewed through "paging".
1. Avoid scrolling to determine page
recognizable.
A page's subject should be immediately
i Elements crucial to identifyinga page's contents must be viewable PART5
without requiring page scrolling.
i. Ifnot visible when the page is first displayed, these elements may Focus and Emphasis, Presentation Information Simply arnd
never be seen.
Meaningfully.
iv. Place these contents in the top 4 inches of the page
2 Minimize vertical serolling: Questions-Answers
i Some scrolling may be necessary to view the entire contents ofa|
page. Long Answer Type and Medium Answer Type Questions
ii. Minimize the requirement for vertical scrolling when defining
organizing, and laying out a page's components. For example, avoid
large graphics and excessive amounts of white
ii. Place closest to the
space. Que 3.13. Discuss about the term Distinctiveness'.
page's top the information most likely to be
needed.
Answer
3. Provide contextual
scrolling cues and a unique 1. Elements of screen must be distinct, clearly distinguished from one
structure: end-of-page| another.
Lower parts of a
page may be
portion appears to satisfy the overlooked, especially if the visibe
2. Distinctiveness can be enhanced through separation and contrast.
concludes that no more can user's needs and the user erroneousiy 3. All screen elements must be perceptually distinct.
be done.
i.
For pages
to the userexceeding
one screen
in length,
4. Distinctiveness is achieved by providing adequate separation between
that part
entire page will of the page is hiddenprovide contextual cu
and that
adjacent elements and screen boundaries and providing adequate
separation between parts of an element.
4 necessitate scrolling. viewing
Avoid horizontal serolling: 5. Screen controls, field and group borders, and buttons should not touch
i. While some vertical window borders or each other.
horizontal sCrolling scrolling
must be
is now
acceptable in Web page desg 6.
Colors
or shades used for adjacent sereen elements must also contrast
i.
Apage too wide to be avoided. well with one another.
screen will completely displayed within
require continuous esofa
scrolling as readingtheis confines med
Que 3.14. Diseuss the techniques to provide emphasis.
perior
 3-15G (Cs/IT-Se,m
Human ComputerInterface
3-16G(CS/IT-Sem-7
Screen Designing

emphasis:
il. Therefore, it should be reserved for
urgent situations and times
Answer used toprovide when a quick response is necessary.
techniques
the
iv. A user should be able to turn off the
Following
are
blinking once his or her
ood aattention-getting quality attention has been captured.
LBrightness:
has a good
ttention
nd no
brighter
element 6. Colors:
A
disturbing features.
and increased brio i. Use color to emphasize and assist in the identification of
items in error, screen
inquiry s g
indicate
used to components.
It may be attention to data
on

is the best
vehicle for calling oreens, Some colors appear brighter than others.
levels on a screen,
more than
two brightness
i Do not use with improper ii. Display no more than four colors at time
essentially
one on a screen
iv. If brightness has
a fault, it is that displays
its
perly set
effectiveneso
alphanumeric in nature, six on a statistical graphics screen.
manual screen contrast
controls can diminish ness, even Other emphasis techniques:
7.
causing it to disappear. Displaying the element in a larger size, placing an element in a
2 Reverse polarity: position where the eye first meets the screen.
Inverse video polarity.
reverses an element's
. Isolating the element from the remainder of the screen.
i Forold text-based sereens, reverse polarity meant displaying dark
text on a light background, or reversing the standard light text on
i. Presenting the element in a distinctive or unusual shape.
iv. Using white space to emphasize blocks of text.
dark background.
ii For elements of screens-pieces of data, messages, and so on-reverse 8. De-emphasize less important elements: To designate an element
as not applicable or not
polarity has a very high attention-getting quality. active, dim it or gray it out.
iv. It can be effectively used for items
selected, items in
information being acted upon, or information of current
error Que 3.15. How to convey depth of levels or a three-dimensional
relevance appearance ?
3 Fonts:
i Differences in fonts have a moderate Answer
Their varying sizes and
attention-getting capability The spatial composition of a screen can also be
shapes can be used to differentiate screen communicated by using
components. perspective, highlighting, shading, and other techniques to achieve a three-
ii. Larger, bolder letters can be used to dimensional appearance.
pieces, such as different levels of designate higher-level screen Techniques used to achieve three-dimensional appearance include:
to search for headings, if the headings are used a

iv. Do not
something. 1 Overlapping:
use
larger
(conversational) and fonts, however, for entry/modification
i. Fully display the window or screen element of current
relevance
4
place too much
Underlining:
display/read-only
emphasis in the headingsscreens, because this will
and partially hide beneath it other
screen windows or elements.
themselves. ii. The completeness or
continuity of outline of the relevant element
will make it appear nearer than those
Underlining is
moderate a partially covered.
.
reduce
In
legibility, so it shouldattention-getting
be used mechanism but it can
2 Drop shadows:
graphicalorsystems
equivalents it is
mnemonics. conservatively and carefuly
commonly used to
i. To further aid in the
perception of the placement of a pull-down
above a screen, or a window above
i. In web
Blinking: pages it is
designate keyboar locate a heavier line along the bottom and
a screen or another window,
5. used to right edges of the pull-
designate navigation links. down or window.
Blinking has a This creates the
very impression ofa shadow caused by a light source in
i.
text
readability andhigh
is attention-getting the upper-left corner of the screen, reinforcing the nearness of the
causes visual disturbing to most capability, but it reau
It often duces important element.
fatigue if used people. 1. The light sóurce should always appear to be
excessively. lower right. upper left, the shadow
 3-17 G (CS/IT-Se
Human ComputerInterface
s-18 G (CSIT-Sem-7)
Screen Designing
pear to
&Highlightinga n dlowlighting

com

or
brighter
screen
elements.

elements
recede, forwar Answer
Highlighted

less bright
ent.
element
while
lowlighted
or

directed to the
highlighted Following are guidelines for and
presenting information on screens. The
Attention
will be fundamental goalsare simplicity in form, comprehensibility in
clarity
organization, efficient information assimilation, and pleasantness in tone.
Shrinking and growing
to growin size,
while less

Important
elements
can

small or
be made
shrink.
Ortan 1. Legibility:
remain
i Legibility is distinguishableness.
elements
to a window when ittisin.
selecte
should expand
example, The type should be of the proper kind and of adequate size and
i A nicon,for attention upon i+
i.
will focus clarity for viewers of all ages.
as it expands,
i The movement,
ii. The contrast between text and its background should be adequate.
5 Color change:
farther away appear
hazy and less saturated. iv. The legibility of screen text still does not match that of text presented
i Objects
secreen element
importance diminishes:. on paper.
i Increasehazinessaselements more vividly.
currently relevant 2 Readability:
i. When we read, we use the shape of a word as a strong aid in
6Sizechange: comprehension; often we do not read individual letters but recognize
smaller.
i Objects farther away appear
word shapes.
i Decrease the size of non-applicable screen elements; displar
ii.
currently relevant elements as larger. Words are given more distinctive shapes by letter "ascenders" and
"descenders".
7. Clarity change:
. Ascenders are letter strokes that rise above the x (height of lower
Objects not at the eye's focus distance appear fuzzy or blurred.
case letter). Descenders are letter strokes that drop below the x.
i Display non-applicable elements as blurred, and currently relevani
SCreen elements as clear.
3. Usabilityy:
& Vertical location: Screen information should be presented in a directly usable form.
i The horizon appears . Reference to documentation or other extra steps for
higher, objects up close lower. interpretation
i.
should never be required.
Present currently
applicable screen elements at the bottom of the In graphical system design, content consisting of words and text is
sCreen, present
9. Spacing change:
non-applicable elements at the screen's top. much faster to comprehend and use than content in a
graphical
form.
Paraway objects
widely spaced. appear more closely spaced, closer objects mor Contrasting display features:
i. Use contrasting display features to call attention to different screen
i Display non-applicable
elements as more
applicable sCreen elements components, items being operated upon, or urgent items.
10. closely spaced, curre
Receding lines:
point imply depth. Paralel lines
as more
widely spaced. Usable features include such things as letter style, size, and color.
11. Motion
converging
ing and
a receding to a vanishing ii. Features chosen should provide perceptual cues to aid in screen
change: Objects component identification so that attention may be quickly and
more slowly the farther moving at uniforim accurately focused.
Que away they are. speeds appear to Demovn
6.How information iv.
Perceptual cues clarify structure and relationships, and give hints
to the reader.
meaningfully? is
pre
presented simply and V. Good readers make
great use of the typographic and semantic cues
found in well-presented text.
 3-19 G(CS/IT-Se
3-20 G (CS/IT-Sem-7)
H u m a n C o m p u t e rI n t e r f a c e
Screen Designing

or horizo rizontally implici i. One point equals 1/12 inch.

4Visuallines:
i The eyeshould beguided
through the
vertically

use of white space

and content
oroug ii. Font sizes should be large enough to be legible on standard
monitors.
the sereen

and control alignments.

information must ho Font styles and weight:
In situations
where a large
movement
amount of
direction may also be com presente C
i Styles: Italics may be used to emphasize something or attract
screen, eye the drawing of actual.
on one
viewer explicitly,
through cal or attention on a Because it may be hard to read on
screen.
many
to the
horizontal rules. monitors, it should be used sparingly.
i Purposeless,
unfettered wandering of the eye should be dise ii. Boldface : Use bold when you want to call attention to
& Consistency:
something. Typically, screens will be used again and again,
information must always be cono:.
consistent and something bold often becomes too visually
Methods chosen to present heavy.
and procedural usage. ii. Underline: In Web pages, an
in visual appearance underline is used to designate
navigation link. It should only be used for this purpose. Its use
a

Diseuss about typography. in any other way will be

Que3.17. confusing to the user.
d Font case:
Answer
The screen designer often has the choice of whether to
Typography :
screen components in mixed case or
displaay
upper case.
1 Typography is the art of laying out text for print or on screens for Upper case means all capital letters.
aesthetics and readability.
Mixed case usually implies
2 In typography, a typeface is the name of a type, such as Times New
apredominance of lowercase letters
with occasional capitalization as needed.
Roman, Arial, Verdana, or Helvetica.
3. Afont is atypeface of a
particular size, such as Tims Roman 16 point or
Arial 12 point. |PART-6
4 In screen
design, the.terms
and different fonts are have
become somewhat Information Retrieval on Web, Statistical Graphics.
used to interchangeable
organize information,
importance, establish reading order, and create
a establish
5. A
seemingly unending particular mood. a
Questions-Answers
for these purposes. supply of typefaces, styles, and sizes are
6.
available
Operating system and Web browser Long Answer Type and Medium Answer
fonts for various providers have also provided default Type Questionas
7. system components.
Many screen users also have
liking, although many the ability to
rarely do. change fonts to suit their own Que
Using too many 3.18.| Discuss about information entry
impression oftechniques at one time only leads
and
the
confusion. to screen screens. modification
a. Font types clutter and
and
families: Answer
Visually simple,
on common,
the text screens, includingreadable fonts areeneeded for clarity
most Information entry and modification
content of business to collect
and modify (conversational) screens are used
i A
family of styles webpages. system information, either by entry or selection.
creating unity in is designed to
applicati0n1s and
a These screens are sometimes
referred to as conversational screens.
ii.
b.
times.
Font size: design. An complement one ther, They
ano guide a person
through task or
example of iamily
nily is thatt of
a
1
.
a
The screen
itselfis the user's focal
process.
Font sizes are
1 Organization point for working with information.
top of a
letter's described by
ascender and points-the
the bottomdistance betwee the Organize these screens logically and clearly,
of its
n
information needs of the user for the reflecting the exact
ler.
descend task being performed.
 3-21 G (CS/IT8 3-22 G (Cs/IT-Sem-7
Human ComputerInterface

used
informats
ntly used information, or.
Sem
r requin
Screen Designir
the
most
frequently

andl at the top of M nct

f
intranets suffer in comparison to their Internet
Ingeneral,
place
the
earliest
screens

screen8 .
or navigation and lack of design standards.
a siblings because of
i information,
on

The following intranet design guidelines:

identifying the
2 Captions:
Provide
meaningful

entered or
captions, clearly
selected.
information 1. Home page:
i. Provide a single home page containing at least a
be
style to display
them (all signifio.
a search facility, and a current news
directory hierarchy,
i Use the
headline
WO i.
segment.
The directory will provide a structured overview of
capitalized).
in relation to their the sites content.
i. Consistently position
controls. They may be
all

left
captions
or right-aligned. associate ii. The search facility will provide a means of
site's index. quickly accessing the
controls:
3 Text
boxes/selection
iv. Unlike a generic facility, this local facility can
line border or polarity present information
Designate by boxes, using either about the importance of the item or
a
i
organization.
topic of interest to the
Spacing and groupings:
from 5 to 7 elemeni. The news segment can include information about
i Create logical medium-size groupings of ents.
.
the company and
things that are of interest to employees.
5 Headings:
i Provide headings to identify groupings. Set off from their rela Visual style:
controls using upper case or mixed-case headline style. ate 1. Since the Internet and an intranet are
a
different information spaces,
complementary but distinguishing look
6 Control arrangement: will quickly inform the
users should they wander outside of the closed
Align controls into columns. Maintain a top-to-bottom, then let internal net to the
public site.
right arrangement.
i. The style should also be unified and
7. Required and optional input: consistent throughout its entire
structure.
i Distinguishing between required and optional data input 3 Task-oriented:
may not be necessary on these screens. may
The decision on whether or not to An intranet will be more
should be based on the distinguish these types of dat 4.
task-oriented and less promotional.
Options and features
and the information's experience
of the user
doing the key entry
familiarity. 1. Since the site will be
frequently used by
understood and learned faster if unified in employees,
ii. When it will be
atechnique to distinguish them is included on a
a form of
completion aid so the arguments for and screen,it ii. More options and
design).
aids are
applicable here as well. against completi features can exist since feelings of intimidation
& and being overwhelmed are
Instructions and much less likely to occur.
i Itis aids:completion 5. Navigational system:
to necessary include
i Locate instructions instructions and completion aids on i A
stronger navigational system
apply.
so
they precede the scree intranet will
will be necessary because the
ii Locate controls to which tne encompass a much larger amount of information.
.
apply
completion aids to the right of Movement between servers may be
necessary.
the controls to Extranet design guidelines:
Que 3.19.Discuss whien
1 An extranet is part of an
intranet and extranet from the Internet. organization's intranet that may be acessed
Answer design guidelines.
2
Intranet design guidelines: It is
this.
a
mixture of the Internet and the
intranet, its design should reflect
Intranets are internal 3. Since its users
Internet. elosed will access it from the Internet, its visual
style
systems that use the navigation should be similar to the
Internet site to indicate
and

capabilities oft but subtly different

to connote its
independence
companionship
 3-23 G (CSSIT-SA

H u m a n C o m p u t e rI n t e r f a c e

site i be included. 3-24 G (CS/IT-Sem-7)

public
Internet

Screen Designing
the graphics.
on

Use the horizontal axis (X) to show time or cause of an event

locations
statistical

Link to i.
4.
short
note
on
independent variable).
(the
Write

Que3.20.
ii. Use the vertical axis (Y) to show a caused effect (the
variable).
dependent
Answer

agraphical format 3. Scales and scaling

Statisticalgraphics: presented
in
is data
graphic
1. Astatistical
also
r e f e r r e d to as
as aa chart graph,
charh.
or i. Place ticks to marks scales on the outside edge of each axis.
graphie,
2
Awell-designed
statistical
ideas
with clarity,
communicated

precision, and ii. Employ a linear scale.

consists ofcomplex ii. Mark scales at standard or customary intervals.
efficiency numberofideas,
in the shorteet .

greatest
viewer the clutter.
and iv. Start a numeric scale at zero (0).
It gives its least possible
3 in the smallest space,
and with
V. Keep the number of digits in a scale to a minimum.

4 It will also induce

the viewer to
think of substance, not techni..
echniques or vi. Display only a single scale on each axis.
methodology amounts ofinformation by tvina
vii. For large data matrices, consider displaying
It will provide coherence to large
duplicate axes.
5. together in a meaningful way, and it will encourage data comparisone. bf vii. Provide aids for scale interpretation.
its different pieces by the eye. ix. Provide scaling consistency across two or more related
6. Awell designed statistical graphic display also avoids distortions by teline
graphics.
X. Clearly label each axis in a left-to-right reading orientation.
the truth about the data.
4. Proportion:
Que 3.21. Explain the components of statistical graphics. i. Provide accurate proportion of the displayed surfaces to the
data
they represent.
Answer i. Provide proper proportion by :
Components of a statistical graphic a.
Conforming to the shape of the data.
Most statistical graphics have at least two b.
the data, a title, and axes, two scales, an areato Making the width greater than the height.
sometimes a legend or key. present
components include
the following:
Guidelines for graphic
5. Lines
1. Data presentation Data lines should be the heaviest.
i i. Axes lines should be of medium
Emphasize the data. weight.
i. Minimize the non data i. Extend the lines entirely around the
elements. graphic.
ii. Minimize redundant data. iv. Grid lines
should be
very thin or
iv. Show data absent.
variation, not design Labeling:
v.
Provide the
proper
variation. i.
Employ clear, detailed and thorough labeling.
vi. Restrict the numbercontext for data
the number of
to of
data information carrying
interpretation. i.
ii.
Maintain left-to-right reading
a
orientation.
vii. dimensions being dimensions depie Integrate the labeling with the drawing.
Bmploy data in ed
vii.
Maximize data
multiple
ways, whenever illustrated. iv. Do not curve letters to
match the shape of curved lines.
2. Axes density. possible. V.

vi.
Use only one
typeface, font, and weight.
Do not
Values on an axis separate labeling from the data through ruled lines.
vi.
origin. should increase as Provide information about the source of the data.
vii. Use a
they move away
vay from the 7. Title: legend for complicated
graphs.
i Create a short,
simple, clear, and distinctive title describing the
purpose of the graphic.
 3-25 G (CS/IT-Sen
3-26G (CSIT-Sem-7)
Screen Designing
H u m a n C o m p u t e rI n t e r f a c e

to the

title
above,
centered,
o rleft-aligned
or left
ectangle 2
2
Surface charts:
being depicted by a curve or line represents all the parts
the
Tf the data
axes.
font
ii
Position extended
uppercase
ont.
bythe
or
formed
mixed-case
of a whole, consider developing a surface chart, as illustrated in
usinga
outfully,
Figure 3.22.2.
i i Spellit
numbers:
interpretation
of
8 Aiding request.
Displaya grid
on
data point
o di
to display actual
a
to click
on

Permit the
viewer
for each point or ha
bar. Area 4
i automatically

values
a r e a of the
numeric graphic
ii Show an Area 3
zoom in o n
viewer to
Permit the scale values.
iv.
user to change the Area 2
Permit the table.
V.
between a graphic and a
Permit toggling
vi.
statistical graphics ?
are the types of
Que 3.22 What Area 1

Answer Fig. 3.22.2.A surface chart.

graphies:
Types ofstatistical
graphs: In this kind of graph, the curves or lines are stacked above one
1. Curve and line
used to show relationships between another to indicate individual amounts or aggregated amounts.
Curves and line graphs can be
defined two continuous
by variables. i. Each boundary height is determined by the height of the line below
Bets ofdata it, and the area between each line or eurve is differently coded,
i They are especially useful showing data changes over time, being
superior to other graphic methods for speed and accuracy in usually by textures or shading.
determining data trends. iv. A surface chart is similar to a segmented bar chart.
ii With a curve, the data relations are summarized by a smoothed 3. Scatterplots:
line. With aline, straight line segments connect the data plots. Scatterplots can be used to show relationships among individual
iv. Aline data points in a two-dimensional array.
graphisillustrated
a continuous function.
in Figure 3.22.1.This kind
ofgraph implies
1. A point is displayed on the plot where the X-axis and Y-axis variables
v. If the data point elements are discrete, it is better to use a bar
intersect, as illustrated in Figure 3.22.3.
graph. i. Correlations and trends on scatterplots can be indicated by the
superimposition of curves (thus combining the scatterplot with
another kind of graphic display).
Line1
Line 2

Line 3 O
O O
Line 4 O
O

Fig. 3.22.1.A O
line graph.
Fig. 3.22.3. A scatterplot.
 3-27 G Sem 3-28G (CS/AT-Sem-7

Human Computer Interface

reen Designing

4 Bar graphs: show a f e w

differences betwees
used to
Bar graphs can be
show to
in a
differences
variable at a
few Da
fe discrrate
entities or

intervals.
series of bars extending from a
. A bar graph
consists of a
illustrated in Figure 3.22.4, 22.4,
they may
or common
origin o r baseline, as
and low points, as illust extend
between separately
Figure 3.22.5, having
plotted high
only one axis.
strated in
horizontally o r vertically. Vert:
i. Bar graphs may be arrayed
sometimes called column charts.
cal bar Fig. 3.22.6. A segmented, or stacked, bar
graphs a r e graph.
6. Pie charts:
Die charts, a circle broken into
i up pie-shaped pieces, can be used to
show an
apportionment or a total into its
illustrated in Fig. 3.22.7. component parts, as

Bar graphs, however, usuauy permit more accurate

estimates of
proportions.

ii Experts caution against the use of pie charts because:

a. They provide no means of absolute measurement.
Fig. 3.22.4. A bar graph with a common origin point. b. They cannot represent totals greater than 100 percent.
C. They can only represent a fixed point in time.
d. Human estimation of relationships is more accurate with linear
than with angular representations

Fig. 3.22.5. A bar graph with

separately plotted Fig. 8.22.7. Apie chart
5.
high and low points. 7. Flow charts :
Segmented or
stacked bars
Ifboth the total measure of a 1Ifthe datato be displayed flows in a complex, yet sequential, process,
value and its consider using a flowchart to schematically represent it.
of interest,
consider using component portions are
i. These bars are similar to segmented or stacked bars. i Floweharts can also be used to aid problem solving in which a
bar graphs
into two or more except that the bar is segmentea solution can be reached by answering a series of questions.
pieces
illustrated in Fig. 3.22.6. reflecting the component 1. They are not useful when trade-offs must be made.
ii. In this way
value
they are similar to
surface graphs and pie charts. PART-7
echnological Considerations in Interface Desig
 3-29 G (CS/IT-Ser
sSOG(CSAT-Ser T-Sem-7)

H u m a n C o m p u t e rI n t e r f a c e
Sereen Designing
S c r e e nr e s o l u t i o n :

Questions-Answers

Screen
solution is the horizontal and vertical height of
a
screer
Medium
Answer Type Questin
nswer 1ype Question in pise
i np i x e l s :

of the monitor's capabilities

Type and and
functione

t15
Itis
mon display resolutions currently areits640video480card.
Answer
Long 2 Most common
x
3 nd height), 800 600, and 1024 768. Higher reso (pixels
x
x
in interfacedee
Discuss
technical
consideration
design for a r ea l s o a v a i l a b l e .

Que 3.23. resolution may detereffective use of a

not permitting sharp and realistic drawings andgraphical
screen

i Graphical system
Poor
*hy shapes. system
by no
ii. Web system
consideration Windo structure and icon design may be severely affected.
ii. Other
web 5.
d Display c o l o r s :

Answer The color palette be of a

variety large enough to
of the disni.
Interface design is
affected by the physical
characteristics
1 establishment ofa family ofddiscriminable colors. permit
interfaces controlling sofiwa
device itself and the
characteristics ofthe The colors used must be accurately and clearly presented in all
2
i Graphicalsystem: situations.
must be compatible with the system!.
1 Graphical system design contextual effect of colors must also be considered, because
screen resolution, and displayable colors, fonta 3. hues may change based on factors such as size and one color's
power, screen size,
and otherfeatures relation to other colors.
location in
must also take into consideration the
2 Designs for Web systems Other display features:
characteristics of the browsers being used and the bandwidth of
the communication medium. Awide range screen
attributes or properties are available to aid the
screen design process.
3. The design must also be compatible with the system platform and
tools being used. Tncluded are such techniques as higher brightness, reverse polarity,
any development and implementation 2.
The design must also take into consideration any available platform differentfont sizes and styles, underlining, blinking, line rules and
white space.
style guide. boxes, color, and
5. Screen design must be compatible with the capabilities of the system, 3. Before beginning design, the designer must be aware of what
how they be most effectively used, and what
including capabilities exist, may
their limitations are.
a. System power:
1 A slow processing speed and small memory may inhibit effective i. Web systems:
use of a
system. The Web is Web of users whose only consistency is
truly Web, a
1 a

inconsistency in the variety the technologies they

2 of possess.
Feedback and animation capabilities may be
limited, reducing the with
system's usability. 2. Monitors with small screens must coexist large screens.

3. Slow responses can be error prone, 3. Color must coexist with monochrome displays.
grossly inefficient, and very
aggravating. those oflow resolution.
High-resolution displays must coexist with
4Asystem must be powerful enough to coexist with low speed.
promptly, responsively, and perform all necessary actionsS High-speed information transmission must
b. Screen size: meaningfully. support many
different and desirable
New browsers that contain andbrowsers that support little.
Ieatures must coexist with old
Through the years, the physical size of an reconfigure
ther
area has been available monitor's screen for the designer, users
can
gradually increasing. 20
make matters worse characteristics.
2 Current typical monitor own PCs, further changing some of its
various demands while
sizes range from 13 to
diagonally), with 17 inches being most common.
21 inches
(measurea 8 The designer must be capable of handling these
Creating usable.
Human Computer Interface
3-31 (CSIT -7)
g I 2G (CS/T-Sem-7

Screen Designing
9 Web pages
accessible

and computer platforms.

through dif browsers, operat Semi 3.
If a page is designed using a1font the
browser displays its default user does
requires having an awareness
of system . systemg older rowsers support only
f ot have
10. To do this
satisfy the
needs ofthe majority. sers,
and then nfiguratifor
designing
4
Many
and Courier.
two fonts, Times
Roman
Default fonts may include Times New
users.

utilize the Web's richest features, however, the

the 5. and Verdana. Roman, Arial,
11. To
understand the current level of hnology and apply it in lesigner Tmus, e B a n d w i d t h :
Helvetica,
for those users at the
and usable way, especially
technological spectrum.
high
ningithea
nd of 1
The a m o u n t of data that can travel
channel in a given amount ot time is through communication
a
12 The temptation, though, to apply technology simply for te called bandwidth
sake must be resisted.
mply for technology, 2.
Currently, the typical Web user is
dialing in at 56 kilobytes
second (kbps) through a regular telephone line. per
13. The goal in design is to satisfy the user's need or want, not the
While a cable modem
is
14. Following are some technological considerations that affect designer
the
3. currently
the most
connection to the Web for home users. reliable high speed
design: website .
Color:
a. Browsers
1 The palette must be of a variety large enough to
color
1 The pressure for lowest-common-denominator design is. establishment of a family of discriminable colors. permit
outweighed by the designer's desire to create larger disni
fter The colors used must be
and employ the latest display and browser
features. splays 2. accurately
and clearly presented in all
situations, but be aware that colors may appear
2. The needs of all users must be considered in
design. differently on different nmonitors, and all users may notslightly
default
b. Compatibility: their palettes to high color settings.
1. The entire Web page content should be 3. Use colors that will succeed on a
variety of
accessible from the platforms and
browsers of all users,
presenting content as monitors. Design using a browser-safe, cross-platform palette
predictable as possible. consistently and of 216 colors.
2. Avoid fancy
technology; many people still use old g Versions:
that do not support such browsers
things as frames or JavaScript. 1. To provide universal access to a website, provide
browsers will interpret Java Newer multiple
applets. versions that support multiple browsers.
c. Monitor size and
resolution: 2. To limit the site to one browser may deny access to, and alienate,
1.
Designed page content should
always be users who do not have the proper one.
boundaries of an restricted to the
"imagesafe"
vertically, depending
area
horizontally,
and perhaps 3.
Make of browser "sniffers", (programs
use the that
on server

upon whether vertical detect the user's browser type and determine which version
determined as necessary to see scrolling i8
the page's entire should then be downloaded).
2.
Exceeding the content.
horizontal safe area will . Always provide a text-only version of the website. This will be
scrolling to see the page's require horizontal
entire width. Because necessary a s long a s u s e r s with small displays and low
information will not some
always be visible, content usability ana bandwidths exist.
interpretation
inconvenienced.
will be
severely degraded, and the ii. Other web consideration:
d Fonts: us
1. Downloading :
1. Not all
browsers provide the same . Dlow download speeds ongoing complaint of Web
are an
users.

2
Different ofdefault font types and sizestypographic operatio . Download times of 8 to 10 seconds per page should
not De
the
the type
browserbrowser, browser version,may exist, on
exceeded, even for bandwidths of 28.8 kbps.
runs on. and dependem
operating y ngeneral, keep graphics and size as small as possible.
page
Human Computer Interfacee
3-33 G(CS/AT-Se
iv.
Specifically, use text instead of graphics
V.
Also, repeatedly use a graphic so it may whenever possible
be store.
stored
browser's
Web
cache. The cache is a
temporary storage n the
pages and images. the
vi. Once rea for
remains
a
graphic is
downloaded, it is placed in
Curreney: there for the cache
the cac
2. a
prescribed period of time.
Update the
The nature Web site regularly to keep
of the
timeliness.information curre
i. Web implies
Outdated information
3. Currency means casts doubts on a
Page printing trustworthiness to many
Web site's
i.
Some people users. credibilit
i.
prefer
longer than half to
read hard
Make a
page. copy,
iii.
printing
sections, pages,easy for
users,
especially anything
Since
most
or
including the
groups of related
iv
low-end
iv. printed at this printers capability to print
pages with
This
higher resolution. print at 300 dpi, minimal effort.
4. however. resolution will
Maintainability:
pages may be
i result in a
ii Provide easy
longer printing
Change mustwebsite time,
i.
iv.
evolves, and matures.
Website
be
easily maintainability
to
accommodated
sustain its
Remove
to maintenance means
those outdated
as
the currency.
website
v.

Properly information
newly created. website grows,
topics candesigned,
be
reformat largeupdatedmodular
and
enhancement.
expired links, link old
amountsquickly system pages pages
of without
informationa.needingcovering specific
to
change and