Unit-III

SCREEN DESIGNING
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.
 SCREEN DESIGNING
A well Design Screen :
 Reflect The capabilities, needs and tasks of its
users.
 Effectively Utilizes the capabilities of its
Controlling Software.
 Achieves the business objectives of the system
for which it is designed
Human Consideration in Screen Design
• How much information present in screen
• How a screen is organized
• Screen’s components
• Language used in screen

• What a user is looking for a good design and a

kinds of things screen users do interacting
with a system or website?
 Distract the screen user
How to Distract the screen user Barnett(1993) has
compiled a list of factors that when screen poorly
designed.
 Unclear captions and badly worded questions
 Improper types and graphic emphasis
 Misleading headings
 Irrelevant and unnecessary information
 Cluttered and cramped layout
 Poor quality of presentation, appearance and
arrangements.
• Howlett (1995) based upon experiences at Microsoft suggests the most
common problems in visual interface design are.

• Visual inconsistency
• Lack of design features
• Overuse of colours
• Poorly Design icons
• Bad typography
 What Screen user wants

• An orderly, clean, clutter-free appearance.

• An obvious indication of what is being shown and what should
be done with it.
• A clear indication of when an action can make a permanent
change in data or system
• Plain and simple English.
• A clear indication of what relates to what including options,
headings, captions, data and so forth.
 What screen uses do
• Identifies a task to be performed or need to
be fulfilled
• Decides how the task will be completed or the
need fulfilled
• Manipulates the computers controls.
• Gathers the necessary data.
• Forms judgments resulting in decisions
relevant to the task or need.
 Interface design goals
• To make an interface easy and pleasant to use
then the goal in design is to:
– Reduce visual work
– Reduce intellectual work
– Reduce Memory Work
– Reduce motor work
– Minimize or eliminate any burden or instructions
imposed by technology.
 Principal of Screen Design
• The importance of Visual hierarchy.
• The copy is part of Design.
• Conventions are important, we should use them.
• When designing for the mobile phone we design
for our hands , too.
• Pay attention to the effective surface area ratio.
• Aim at simplicity and Transparency.
• Be care full with animations and motion.
 Screen Planning and purpose
• Each screen Element….
– Every Control
– All Text
– The screen organization
– All emphasis
– Each Color
– Every Graphics
– All Screen Animation
– Each Message
– All forms of feedback

• Must have meaning to Screen user

• Serve a purpose in performing task
 Organizing screen elements
• Organizing screen elements clearly and meaningful
• Consistency
– Provide real world Consistency
– Person’s experience, expectations ,work conventions, cultural
conventions.
– Provide internal Consistency
– Operational and navigational procedures
– Visual identity or theme
– Component
– Organization
– Presentation
– Usage
– location
 Eight Principles for organizing screen
elements
1. Information Hierarchy
2. Grouping and similarity
3. White Space
4. Visual element
5. Grid system
6. Fitt’s law
7. Progressive Disclosure
8. Consistent Navigation
1. Information Hierarchy: arrange screen element
based on their importance and relevance to the
user.
2. Grouping and similarity:-Group related elements
together to visually connected them and convey
their relationship.
3. White Space:- Empty space
4. Visual element:-Align screen elements along a
common axis.(left ,centre or right)
5. Grid system;- Making the screen visually balance
 Fitt’s law
• Fitts's law (often cited as Fitts' law) is a predictive
model of human movement primarily used
in HCI and ergonomics. The law predicts that the
time required to rapidly move to a target area is a
function of the ratio between the distance to the
target and the width of the target. Fitts's law is
used to model the act of pointing, either by
physically touching an object with a hand or finger,
or virtually, by pointing to an object on a computer
monitor using a pointing device. It was initially
developed by Paul fitts.
6. Progressive Disclosure:-Present information
and options progressively ,revealing more
details as explore the interface.
7. Consistent Navigation:- Keep navigation
elements in familiar locations such as top
menu or side bar ,so user can easily find their
ways around the interface.
 Ordering of Screen Data and Content
– Divide information into units that are logical , meaning full and
sensible.
– Provide an ordering of screen units on information and elements
that is prioritized according to the user’s needs.
– From groups that cover all possibilities.
– Ensure that information that must be compared is visible at the
same time.
– Possible ordering schemes include
• Conventional
• Sequence of use
• Frequency of use
• Function
• Importance
• General to specific
Human Eye
 Fovea and Peripheral Vision
• The fovea centrals (fovea) is a small
depression at the center of the retina. It
provides the sharpest vision in the human eye,
also called fovea vision.
 What Is the Function of the Fovea?

• The fovea is the area of the retina that

provides maximum visual acuity. To see an
object with sharp vision, you must focus the
image on the fovea centralis.
• Foveal vision consists of the central two
degrees of your visual field, which is about
twice as wide as your thumbnail held at arm’s
length. This is why you unconsciously move
your head or eyes when reading this sentence
— to center the words on the fovea.
Other Parts and Functions of the Human Eye

Other important parts of the eye include:

• The cornea. The clear bulging surface of the eye.
• Sclera. The white part of the eye.
• Conjunctiva. Covers the sclera.
• Pupil. An opening through which light passes into the eye.
• Iris. The colored part that surrounds the pupil.
• The lens of the eye. The clear inner part of the eye that helps
with focus.
• Vitreous Humor. The fluid-filled space between the lens and
the retina.
• Optic nerve. The bundle of nerve fibers that relays visual
information from the retina to the brain for processing.
 Peripheral vision

• Peripheral vision, or indirect vision, is vision as it

occurs outside the point of fixation, i.e. away from
the center of gaze or, when viewed at large angles,
in (or out of) the "corner of one's eye". The vast
majority of the area in the visual field is included in
the notion of peripheral vision. "Far peripheral"
vision refers to the area at the edges of the visual
field, "mid-peripheral" vision refers to medium
eccentricities, and "near-peripheral", sometimes
referred to as "para-central" vision, exists adjacent
to the center of gaze.[
 Functions

The main functions of peripheral vision are

• recognition of well-known structures and
forms with no need to focus by the foveal line
of sight
• identification of similar forms and movements
• delivery of sensations which form the
background of detailed visual perception
• The loss of peripheral vision while retaining central
vision is known as tunnel vision, and the loss of
central vision while retaining peripheral vision is
known as central scotoma.
• Peripheral vision is weak in humans, especially at
distinguishing detail, color, and shape. This is because
the density of receptor and ganglion cells in the retina
is greater at the center and lowest at the edges, and,
moreover, the representation in the visual cortex is
much smaller than that of the fovea.