Unit - I

Pages 1 to 336
Importance of the User Interface
 Defining the User Interface
 The Importance of Good Design
 A Brief History of the HCI
Importance of the User Interface
 Defining the User Interface
 HCI is the study, planning and design of how people and
computers work together so that a person’s needs are satisfied
in the most effective way
 The user interface is the part of a computer and its software
that people can see, hear, touch, talk to, or otherwise
understand or direct
User Interface

 It has essentially two parts

 Input: it is how a person communicates his or her needs or
desires to the computer
 Output is how the computer conveys the results of its
computations and requirements to the user
 Proper Interface Design
 Will provide a mix of well-designed input and output
mechanisms that satisfy the user’s needs, capabilities and
limitations in the most effective way possible
Importance of Good Design
 A well-designed interface and screen is their window to view
the capabilities of the system
 If screen’s layout and appearance are confusing and
inefficient, people will have greater difficulty in doing their
jobs and will make more mistakes
 It leads to aggravation, frustration and increased stressed
Benefits of Good Design
 Screen users were about 20% more productive with less-
crowded version
 Reformatting inquiry screens following food design
principles reduced decision-making time by about 40%
 Time to extract information from displays was 128% faster
for the best format than for the worst
 Redesigning enabled the users to locate the desired
information 80% of the time
 Training costs are lowered because training time is reduced,
support line costs are lowered because fewer assist calls are
necessary and employee satisfaction is increased
A Brief
History
A Brief
History
A Brief History of Screen Design
A Brief History of Screen Design
Characteristics of GUI and WUI
 Graphical User Interface
 Web User Interface
The Graphical User Interface
 A user interface, is a collection of techniques and
mechanisms to interact with something
 Graphical interface, the primary interaction mechanism is a
pointing device of some kind
 Objects: User interacts with a collection of elements referred
to as objects
 Actions: People perform operations, called actions, on
objects
 The popularity of Graphics
 Assumes 3-D look
 Info floated in windows
 Windows could float above other windows
 Text could be replaced by graphical images called icons
 Screen navigation and commands are executed through menu
bars and pull-down menus
 Radio buttons, list boxes, check boxes and palettes coexisted
 WIMP interface (Windows, icons, menus & pointers)
 Reduces the requirement for perceptual and mental information
recoding and reorganization and also reduces the memory load
The concept of Direct Manipulation
 The system is portrayed as an extension of the real world
 Continuous visibility of objects and actions
 Actions are rapid and incremental with visible display of
results
 Incremental actions are easily reversible
Indirect Manipulation
 The operation may be difficult to conceptualize in the
graphical system
 The graphics capability of the system may be limited
 The amount of space available for placing manipulation
controls in the window border may be limited
 It may be difficult for people to learn and remember all the
necessary operations and actions
 Indirect manipulation
 The operation may be difficult to conceptualize in the graphical
system
 The graphics capability of the system may be limited
 The amount of space available for placing manipulation controls
in the window border may be limited
 It may be difficult for people to learn and remember all the
necessary operations and action
Graphical Systems: Advantages
1. Symbols recognized faster than text
2. Faster learning
3. Faster use and problem solving
4. Easier remembering
5. More natural
6. Exploits visual/spatial cues
7. Fosters more concrete thinking
8. Provides context
9. Fewer errors
10. Increased feeling of control
Graphical Systems: Advantages
11. Immediate feedback
12. Predictable system responses
13. Easily reversible actions
14. Less anxiety concerning use
15. More attractive
16. May consume less space
17. Replaces national languages
18. Easily augmented with text displays
19. Low typing requirements
20. Smooth transition from command language system
Graphical Systems: Disadvantages
1. Greater design complexity
2. Learning still necessary
3. Lack of experimentally-derived design guidelines
4. Inconsistencies in technique and terminology
5. Working domain is the present (WYSIWYG)
6. Not always familiar
7. Human comprehension limitations
8. Window manipulation requirements
9. Production limitations
Graphical Systems: Disadvantages
10. Few tested icons exist
11. Inefficient for touch typists
12. Inefficient for expert users
13. Not always the preferred style of interaction
14. Not always fastest style of interactions
15. Increased chances of clutter and confusion
16. The futz and fiddle factor
17. May consume more screen space
18. Hardware limitations
Some conclusions
 The design of an interface, and not its interaction style, is the
best determinant of ease of use
 User preferences must be considered in choosing an interaction
style
 In most of the cases, words are more meaningful to users than
icons
 The content of a graphic screen is critical to its usefulness. The
wrong presentation or a cluttered presentation may actually lead
to greater confusion, not less
 The success of a graphical system depends on the skills of its
designers in following established principles of usability
Characteristics of GUI
 Sophisticated Visual  Object Orientation
Presentation  Objects
 Pick-and-Click Interaction  Subobjects
 Restricted Set of Interface  Container objects
Options  Device objects

 Visualization  Collection
 Constraint
 Composite
 Container
 Persistence
Characteristics of GUI
 Properties or attributes of objects
 Actions
 Application Vs Object or Data Orientation
 Views
 Use of Recognition Memory
 Concurrent performance of functions
Printed Pages Vs WUI
 Page Size
 Page rendering
 Page layout
 Page resolution
 User focus
 Page navigation
 Sense of place
 Interactivity
 Page independence
Principles of User Interface Design
 Principles of Xerox STAR
 The illusion of manipulable objects
 Visual order and viewer focus
 Revealed structure
 Consistency
 Appropriate effect or emotional impact
 A match with the medium
 General Principles
 General Principles
1. Aesthetically Pleasing 12. Forgiveness
2. Clarity 13. Predictability
3. Compatibility 14. Recovery
4. Comprehensibility 15. Responsiveness
5. Configurability 16. Simplicity
6. Consistency 17. Transparency
7. Control
8. Directness
9. Efficiency
10. Familiarity
11. Flexibility
Aesthetically Pleasing

 Provide visual appeal by following these presentation and

graphic design principles:
 Provide meaningful contrast between screen elements
 Create groupings
 Align screen elements and groups
 Provide 3-D representation
 Use colour and graphics effectively and simply
Clarity

 The interface should be visually, conceptually, and

linguistically clear, including
 Visual elements
 Functions
 Metaphors
 Words and text
Compatibility

 Provide compatibility with the following

 The user
 The task and job
 The product
 Adopt the user’s perspective
Comprehensibility

 A system should be easily learned and understood. A user

should know the following:
 What to look at
 What to do
 When to do it
 Where to do it
 Why to do it
 How to do it
 The flow of actions, responses, visual presentations, and
information should be in a sensible order that is easy to
recollect and place in context
Configurability

 Permit easy personalization, configuration, and

reconfiguration of settings
 Enhances a sense of control
 Encourages an active role in understanding
 Consistency
 A system should look, act, and operate the same throughout.
Similar components should:
 Have a similar look
 Have similar uses
 Operate similarly
 The same action should always yield the same result
 The function of elements should not change
 The position of standard elements should not change
 Prerequisites & by-products of
inconsistency
 More specialization by system users
 Greater demand for higher skills
 More preparation time and less production time
 More frequent changes in procedures
 More error-tolerant systems
 More kinds of documentation
 More time to find information in documents
 More unlearning and learning when systems are changed
 More demands on supervisors and managers
 More things to do wrong
 Control
 The user must control the interaction
 Actions should result from explicit user requests
 Actions should be performed quickly
 Actions should be capable of interruption or termination
 The user should never be interrupted for errors
 The context maintained must be from the perspective of the
user
 The means to achieve goals should be flexible and compatible
with the user’s skills, experiences, habits, and preferences
 Avoid modes since they constrain the actions available to the
user
 Permit the user to customize aspects of the interface, while
always providing a proper set of defaults
Directness

 Provide direct ways to accomplish tasks

 Available alternatives
 The effect of actions on objects should be visible
Efficiency

 Minimize eye and hand movements, and other control

actions
 Transitions between various system controls should flow
easily and freely.
 Navigation paths should be as short as possible
 Eye movement through a screen should be obvious and
sequential
 Anticipate the user’s wants and needs whenever possible
Familiarity

 Employ familiar concepts and use a language that is familiar

to the user
 Keep the interface natural, mimicking the user’s behavior
patterns
 Use real-world metaphors
 Flexibility
 A system must be sensitive to the differing needs of its users,
enabling a level and type of performance based upon
 Each user’s knowledge and skills
 Each user’s experience
 Each user’s personal preference
 Each user’s habits
 The conditions at that moment
Forgiveness

 Tolerate and forgive common and unavoidable human

errors
 Prevent errors from occurring whenever possible
 Protect against possible catastrophic errors
 When an error does occur, provide constructive messages
Predictability

 The user should be able to anticipate the natural

progression of each task
 Provide distinct and recognizable screen elements
 Provide cues to the result of an action to be performed
 All expectations should be fulfilled uniformly and
completely
Recovery

 A system should permit

 Commands or actions to be abolished or reversed
 Immediate return to a certain point if difficulties arise
 Ensure that users never lose their work as a result of
 An error on their part
 Hardware, software, or communication problems
Responsiveness

 The system must rapidly respond to the user’s requests

 Provide immediate acknowledgement for all user actions:
 Visual
 Textual
 Auditory
 Simplicity
 Provide as simple an interface as possible
 Five ways to provide simplicity:
 Use progressive disclosure, hiding things until they are needed
 Present common and necessary functions first
 Prominently feature important functions
 Hide more sophisticated and less frequently used functions
 Provide defaults
 Minimize screen alignment points
 Make common actions simple at the expense of uncommon
actions being made harder
 Provide uniformity and consistency
Steps to minimize complexity
 Progressive disclosure
 Provide defaults
 Minimize screen alignment points
 Make common actions simple
 Provide uniformity and consistency
Transparency

 Permit the user to focus on the task or job, without

concern for the mechanics of the interface
 Workings and reminders of workings inside the computer
should be invisible to the user
Trade-Offs
 Final design will be based on a series of trade-offs balancing
often-conflicting design principles
 People’s requirements always take precedence over technical
requirements
The User Interface Design Process
 Obstacles and pitfalls in the development path
 Designing for people: 5 commandments
 Usability
 The Design Team
Obstacles in the development path
1. Nobody ever gets it right the first time
2. Development is chock-full of surprises
3. Good design requires living in a sea of changes
4. Making contracts to ignore change will never eliminate the need
for change
5. Even if you have made the best system humanly possible, people
will still make mistakes when using it
6. Designers need good tools
7. You must have behavioral design goals like performance design
goals
Pitfalls in the development path

1. No early analysis and understanding of the user’s needs

and expectations
2. A focus on using design features or components that are
“neat” or “glitzy”
3. No usability testing
4. No common design team vision of user interface design
goals
5. Poor communication between members of the
development team
Designing for people: 5
commandments
1. Gain a complete understanding of the users and their
tasks
2. Solicit early and ongoing user involvement
3. Perform rapid prototyping and testing
4. Modify and iterate the design as much as necessary
5. Integrate the design of all the system components
 Usability

 “The capability to be used by humans easily and effectively where

 Easily = to a specified level of subjective assessment
 Effectively = to a specified level of human performance
Common Usability Problems
1. Ambiguous menus and icons
2. Languages that permit only single-direction movement
through a system
3. Input and direct manipulation limits
4. Highlighting and selection limitations
5. Unclear step sequences
6. More steps to manage the interface than to perform tasks
7. Complex linkage between and within applications
8. Inadequate feedback and confirmation
9. Lack of system anticipation and intelligence
10. Inadequate error messages, help, tutorials, and
documentation
Web usability problems
1. Visual clutter
2. Impaired information readability
3. Incomprehensible components
4. Annoying distractions
5. Confusing navigation
6. Inefficient navigation
7. Inefficient operations
8. Excessive or inefficient page scrolling
9. Information overload
10. Design inconsistency
11. Outdated information
12. Stale design caused by emulation of printed documents and
past systems
Practical measures of Usability
 Are people asking a lot of questions or often reaching for a
manual?
 Are frequent exasperation responses heard?
 Are there many irrelevant actions being performed?
 Are there many things to ignore?
 Do a number of people want to use the product?
Objective measures of Usability
 How effective is the interface? Can the required range of
tasks be accomplished
 How learnable is the interface? Can the interface be learned
 How flexible is the interface? Is it flexible enough to:
 What are the attitudes of the users? Are they
Objective measures of Usability
 How effective is the interface? Can the required range of
tasks be accomplished
 At better than some required level of performance?
 By some required percentage of the specified target range of
users?
 Within some required proportion of the range of usage
environments?
Objective measures of Usability
 How learnable is the interface? Can the interface be learned
 Within some specified time from commissioning and start of
user training?
 Based on some specified amount of training and user support?
 Within some specified relearning time each time for
intermittent users?
Objective measures of Usability
 How flexible is the interface? Is it flexible enough to:
 Allow some specified percentage variation in tasks and/or
environments beyond those first specified?
Objective measures of Usability
 What are the attitudes of the users? Are they
 Within acceptable levels of human cost in terms of tiredness,
discomfort, frustration, and personal effort?
 Such that satisfaction causes continued and enhanced usage of
the system?
The Design Team

 Provide a balanced design team, including specialists in:

 Development
 Human factors
 Visual design
 Usability assessment
 Documentation
 Training
 Know your user or client
 Understanding how people interact with computers
 Understand the human characteristics important in
design
 Identify the user’s level of knowledge and experience
 Identify the characteristics of the user’s needs, tasks,
and jobs
 Identify the user’s psychological characteristics
 Identify the user’s physical characteristics
 Employ recommended methods for gaining
understanding of users..
Understanding how people interact with
computers
 Why people have trouble with
computers
 Use of Jargon
 Non-obvious design
 Fine distinctions
 Disparity in problem-solving
strategies
 Design inconsistency
 Responses to poor design
 Psychological  Physical
 Confusion  Abandonment of the system
 Annoyance  Partial use of the system
 Frustration  Indirect use of the system
 Panic or stress  Modification of the task
 Boredom  Compensatory activity
 Misuse of the system
 Direct programming
Important Human Characteristics in
Design
1. Perception
2. Memory
3. Sensory Storage
4. Visual Acuity
5. Foveal and Peripheral Vision
6. Information Processing
7. Mental Models
8. Movement Control
9. Learning
10. Skill
11. Individual Differences
 Perception
 It is our awareness and understanding of the elements and objects
of our environment through the physical sensation of our various
senses, including sight, sound, smell and so forth
 Perceptual characteristics include
 Proximity: Our eyes and mind see objects as belonging together if they
are near each other in space.
 Similarity: Our eyes and mind see objects as belonging together if they
share common visual property, such as color, size, shape, brightness or
orientation.
 Matching Patterns: We respond similarly to the same shape in
different sizes. The letters of the alphabet, for example, possess the
same meaning, regardless of physical size.
 Succinctness: We see an object as having some perfect or simple shape
because perception or simplicity is easier to remember.
 Closure: Our perception is synthetic; it establishes meaningful wholes.
If something does not quite close itself, such as a circle, square,
triangle, or word, we see it is closed anyway.
 Unity: Objects that form closed shapes are perceived as a
group.
 Continuity: Shortened lines may be automatically
extended.
 Balance: We desire stabilization or equilibrium in our
viewing environment. Vertical, horizontal, and right
angles are most visually satisfying and easiest to look it.
 Expectancies: Perception is also influenced by
expectancies ; sometimes we perceive not what is there
but what we expect to be there.
 Context: Context, environment, and surroundings also
influence individual perception
 Signals Vs Noise
 Memory
 It is not the most stable of human attributes.
 Short-tem or working, memory receives information from
either the senses or long-term memory, but cannot receive
both at once, the senses being processed separately.
 Knowledge, experience, and familiarity govern the size
and complexity of the information that can be
remembered.
 Long-term memory contains the knowledge we possess.
 Information received in short-term memory is transferred
to it and encoded within it, a process we call learning.
 Learning is improved through imitation.
 Minimize memory load
 Presenting information in an organized, structured,
familiar, and meaningful way.
 Placing all required information for task performance
in close physical proximity.
 Giving the user control over the pace of information
presentation.
 Sensory Storage
 It is the buffer where the automatic processing of
information collected from our senses takes place
 It is an unconscious process, large, attentive to the
environment, quick to detect changes, and constantly
being replaced by newly gathered stimuli
 Repeated and excessive stimulation can fatigue the
sensory storage mechanism, making it less attentive
and unable to distinguish what is important (called
habituation)
 Visual Acuity
 It is “the capacity of the eye to resolve details”
 Visual angle from the point of fixation increases
 It has been shown that relative visual acuity is approximately
halved at a distance of 2.5 degrees from the point of fixation
 If avg. viewing distance of a display screen is 19 inches, the
size of the area on the screen of optimum visual acuity is
1.67 inches
 The eyes sensitivity increases for those characters closes to
the fixation point
 The eye is also never perfectly steady (improves detection of
edges, causes shimmer)
 Foveal and Peripheral Vision
 Foveal vision is used to focus directly on something.
 Peripheral vision senses anything in the area
surrounding the location we are looking at, but what is
there can’t be clearly resolved because of the
limitations in visual acuity
 Both visions maintain a cooperative and competitive
relationship
 PV provides clues while performing visual search on a
screen
 Information Processing
 Highest level: is identified with
consciousness and working memory; it is
limited, slow and sequential;
 It is Used for reading and understanding
 Lowest level: processes familiar information
rapidly, in parallel with the higher level
 We look rather than see, perceive rather than
read
 Mental Models
 It is simply an internal representation of a persons
current understanding of something
 As a result of our experiences and culture, we develop
mental models of things and people we interact with
 If the system conforms to the mental models a person as
developed, the model is reinforced and the systems use
feels more intuitive
 The above is the reason why in design it is critical that a
user’s mental models be to identified and understood.
 Movement Control
 Once data has been perceived and an appropriate action
decided upon, a response must be made; in many cases
the response is movement
 Fitts Law
 The time to acquire a target is a function of the
distance to and size of the target
 Implications in screen design are
 Provide large objects for important functions
 Take advantage of the ‘pinning’ actions of the sides,
top, bottom, and corners of the screen
 Learning
 It is the process of encoding in long-term memory
information that is contained in short-term memory.
 A design developed to minimize human learning time
can greatly accelerate human performance.
 Learning can be enhanced if
 Allows skills acquired in one situation to be used in
another somewhat like it. Design consistency
accomplishes this.
 Provides complete and prompt feedback.
 Is phased, that is, it requires a person to know only the
information needed at that state of the learning process.
 Skill
 To perform a task skillfully requires linking inputs and
responses into a sequence of action.
 The essence of skill is performance of actions or
movements in the correct time sequence with adequate
precision.
 Characterized by consistency and economy of effort.
 Skills are hierarchical in nature, and many basic skills
may be integrated to form increasingly complex ones.
 It is accomplished by increasing mastery of the system
through such things as progressive learning of short
cuts, increased speed, and easier access to information
or data.
 Individual Differences
 We all differ – in looks, feeling, motor abilities,
intellectual abilities, learning abilities and speed etc.,
 Individual differences complicate design because the
design must permit people with widely varying
characteristics to satisfactorily and comfortably learn
the task or job.
 Technology now offers designers to create multiple
versions of the system.
Human Considerations in Design
Human Considerations in Design
Human Considerations in Design
Human interaction speeds
Average human interaction speeds
Reading
Prose text: 250-300 WPM
Proofreading text on paper: 200 WPM
Proofreading text on monitor: 180 WPM
Listening: 150-160 WPM
Speaking to a computer 105 WPM
After recognition corrections: 25 WPM
 Keying
Typewriter
Fast typist: 150 WPM and Higher
Average typist: 60-70 WPM
Computer
Transcription: 33 WPM
Composition : 19 WPM
Two finger typists
Memorized text: 37 WPM
Copying text: 27 WPM
Hand printing
Memorized text: 31 WPM
Copying text: 22 WPM
 Methods for gaining an
understanding of Users
 Visit user’s locations, particularly if they are
unfamiliar to you, to gain an understanding of the
user’s work environment.
 Talk with users about their problems, difficulties,
wishes, and what works well now. Establish direct
contact, avoid relying on intermediaries.
 Observe users working or performing a task to see
what they do, their difficulties, and their problems.
 Learn about the work organization where the system
may be installed.
 Have users think aloud as they do something to
uncover details that may not otherwise be solicited.
 Try the job yourself. It may expose difficulties that are
not known, or expressed, by users.
 Prepare surveys and questionnaires to obtain a large
sample of user opinions.
 Establish testable behavioral target goals to give
management a measure for what progress has been and
what is still required.
Understand the principles of
Good Screen Design
 Human Considerations in Screen Design
 Develop System Menus and Navigation Schemes
How to distract the screen user
 Unclear captions and badly worded questions
 Improper type and graphic emphasis. Important elements are
hidden
 Misleading headings
 Information requests that require one to backtrack and
rethink a previous answer or look ahead to determine
possible context
 Cluttered, cramped layout
 Poor quality of presentation, legibility, appearance, and
arrangement
How to distract the screen user
 Visual inconsistency in screen detail presentation and with
the OS
 Lack of restraint in the use of design features and elements
 Overuse of 3-D presentations
 Overuse of too many bright colors
 Poorly designed icons
 Bad typography
 Metaphors that are either overbearing or too cure, or too
literal thereby restricting design options
Web Screens - Distractions
 Numerous visual and auditory interruptions
 Extensive visual clutter
 Poor information readability
 Incomprehensible screen components
 Confusing and inefficient navigation
 Inefficient operations and extensive waste of user time
 Excessive or inefficient page scrolling
 Information overload
 Design inconsistency
 Outdated information
 Stale design caused by emulation of printed documents and past
sytems
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, including options,
headings, captions, data and so forth
 Plain, simple English
 A simple way f finding out what is in a system and how to get
it out
 A clear indication of when an action can make a permanent
change in the data or system
What Screen users 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

 PS: PEOPLE WILL SPEND MANY, MANY, HOURS

STARING AT YOUR SCREENS
Interface Design Goals
 Reduce visual work
 Reduce intellectual work
 Reduce memory work
 Reduce motor work
 Minimize or eliminate any burdens or instructions imposed
by technology
The test for a Good Design
 Can all screen elements be identified by cues other than by
reading the words that make them up?
Screen Meaning and Purpose
 Each screen element
 Every control
 All text
 The screen organization
 All emphasis
 Each color
 Every graphic
 All screen animation
 Each message
 All forms of feedback
 Must
 Have meaning to screen users
 Serve a purpose in performing tasks
 Consistency
 Provide real-world consistency. Reflect a person’s experience,
expectations, work conventions, and cultural conventions
 Provide internal consistency. Observe the same conventions and rules for
all aspects of an interface screen, and all applications or Website screens,
including:
 Operational and navigational procedures
 Visual identity or theme
 Component
 Organization
 Presentation
 Usage
 Locations

 Follow the same conventions and rules across all related interfaces
 Deviate only when there is a clear benefit for the user
 Ordering of Screen Data and Content
 Divide information into units that are logical, meaningful and sensible
 Organize by the degree of interrelationship between data or information
 Provide an ordering of screen units of information and elements that is
prioritized according to the user’s expectations and needs
 Possible ordering schemes include
 Conventional
 Sequence of use
 Frequency of use
 Function
 Importance
 General to specific
 Form groups that cover all possibilities
 Ensure that information that must be compared is visible at the same time
 Ensure that only information relative to the users tasks or needs is presented
on the screen
Starting Point
 Provide an obvious starting point in the screen’s upper-left
corner

Note: According to Eyeball fixation studies indicate that in

looking at displays of information, usually one’s eye move
first to the upper-left center of the display
 Screen Navigation and Flow
 Provide an ordering of screen information and elements that:
 Is rhythmic, guiding a person’s eye through the display
 Encourages natural movement sequences
 Minimizes pointer and eye movement distances
 Locate the most important and most frequently used elements or controls
at the top left
 Maintain a top-to-bottom, left-to-right flow
 Assist in navigation through a screen by:
 Aligning elements
 Grouping elements
 Using of line borders
 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 buttons at end of the tabbing order sequence
 When groups of related information must be broken and displayed on
separate screens, provide breaks at logical or natural points in the
information flow
Eye tends to move Sequentially..
 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
Top-to-Bottom orientation..
 Eye movements between items will be shorter
 Control movements between items will be shorter
 Groupings are more obvious perceptually
 When one’s eye moves away from the screen and then back,
it returns to about the same place it left, even if it is seeking
the next item in a sequence
Visually Pleasing Composition
 Provide visually pleasing composition with the following
qualities
 Balance
 Symmetry
 Regularity
 Predictability
 Sequentiality
 Economy
 Unity
 Proportion
 Simplicity
 Groupings
Visually Pleasing Composition
 Provide visually pleasing composition with the following
qualities
 Balance – Create screen balance by providing an equal weight of
screen elements, left and right, top and bottom
 Symmetry – Create symmetry by replacing elements left and
right of the screen centerline
 Regularity – Create regularity by establishing standard and
consistently spaced horizontal and vertical alignment points
Also, use similar element sizes, shapes, colors and spacing
 Predictability – Create predictability by being consistent and
following conventional orders or arrangements
Sequentiality

 Provide sequentiality by arranging elements to guide the eye through the

screen in an obvious, logical, rhythmic, and efficient manner
 The eye tends 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
Visually Pleasing Composition
 Economy
 Provide economy by using as few styles, display techniques, and colors as
possible
 Unity by
 Using similar sizes, shapes, or colors for related information
 Leaving less space between elements of a screen than the space left at the
margins
 Proportion
 Create windows and groupings of data or text with aesthetically pleasing
proportions
 Simplicity
 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
Groupings
 Provide functional groupings of associated elements
 Create spatial groupings as closely as possible to five degrees of
visual angle(1.67” in diameter or about 6 to 7 lines of text, 12
to 14 characters in width)
 Evenly space controls within a grouping, allowing 1/8 to ¼
inch between each
 Visually reinforce groupings
 Provide adequate separation between groupings through liberal use of
white space
 Provide line borders around groups
 Provide meaningful titles for each grouping
Perceptual Principles and Functional Grouping
 Use visual organization to create functional groupings
 Proximity
 Similarity
 Closure
 Matching patters
 Combine visual organization principles in logical ways
 Proximity and similarity
 Proximity and closure
 Matching patterns closure
 Proximity and ordering
 Avoid visual organization principles that conflict
 Proximity opposing similarity
 Proximity opposing closure
 Proximity opposing ordering
Grouping using White Space
 Provide adequate separation between groupings through
liberal use of white space
 For Web pages, carefully consider the trade-off between
screen white space and the requirement for page scrolling
 Grouping using Borders
 Incorporate line borders for
 Focusing attention on groupings or related information
 Guiding the eye through a screen
 Do not exceed three line thicknesses or two line styles on a screen, however
 Use a standard hierarchy for line presentation
 Create lines consistent in height and length
 Leave sufficient padding space between the information and the surrounding
borders
 For adjacent groupings with borders, whenever possible, align the borders
left, right, top and bottom
 Use rules and borders sparingly
 In Web page design
 Be cautious in using horizontal lines as separators between page sections
 Reserve horizontal lines for situations in which the difference between adjacent
areas must be emphasized
Grouping using Borders
 Line borders
 Line thickness variations
 Consistent line widths and heights
 Sufficient space padding
 Alignment
 Use lines and borders sparingly
Grouping Using Backgrounds
 Consider incorporating a contrasting background for related
information
 The background should not have the “emphasis” of the screen
component that should be attended to. Consider about a 25 %
gray screening
 Reserve higher contrast or “emphasizing” techniques for screen
components to which attention should be drawn
Visual Style in Web Page 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 Website owner
 The profile, tastes, and expectations of the Web user.
Amount of Information
 Present the proper amount of information for the task
 Too little is inefficient
 Too much is confusing
 Present all information necessary for performing an action or
making a decision on one screen, whenever possible
 People should not have to remember things from one screen to
the next
 Restrict screen or window density levels to no more than
about 30%
Web Page Size
 Minimize page length
 Restrict to two or three screens of information
 Place critical or important information at the very top so it is
always viewable when the page is opened
 Locate it within the top 4 inches of page
Against longer pages
 Tax the user’s memory, as related information is more
scattered and not always visible
 Can lead to a lost sense of context as navigation buttons and
major links disappear from view
 Display more content and a broader range of navigation links
making it more difficult for users to find and then decide
upon what path to follow
 Require excessive page scrolling, which may become
cumbersome and inefficient
 Are less conducive to the “chunking” information
organizations scheme commonly employed in websites
Arguments for longer pages are
 Resemble the familiar structure of paper documentation
 Require less “clicks” for navigating through a website
 Are easier to download and print for later reading
 Are easier to maintain because they possess fewer category
navigation links to other pages