SNS College of Engineering

Department of Computer Science and

Engineering

Web Interface Design

Presented by
S.Yamuna
AP/CSE

VISUAL DESIGN PRINCIPLES FOR USABLE

12/28/2017 1
INTEFACES
Making things easier to use and
understand
(user experience)
Unfamiliar can create confusion
 User Interface Design
– Flexible environment design
• Ability to experience and interact
Simple and transparent
Must assist and guide
Role of good design

VISUAL DESIGN PRINCIPLES FOR USABLE

12/28/2017 2
INTEFACES
 Defining Visual Design
• Nautilus shell
– Perfect analogy - design and design process
• Process
– Goal is reached
• Performs for people
• Challenges to design team
– Easy to use
– Meet user needs
– Address commercial consideration
– Can be mass produced
• Visual form
• Multiple solution
• Analysis of problem
– Multitude of view points
– methods
VISUAL DESIGN PRINCIPLES FOR USABLE
12/28/2017 3
INTEFACES
 Design Process
• Nature
– Divergent
– Iterative
– cyclic

VISUAL DESIGN PRINCIPLES FOR USABLE

12/28/2017 4
INTEFACES
Steps in design process
 Problem identification and definition
 Gathering and analysing information
 Determining performance criteria for a successful
solution
 Generating alternative solutions and building
prototypes
 Implementing choices
 Evaluating outcomes
 Production
VISUAL DESIGN PRINCIPLES FOR USABLE
12/28/2017 5
INTEFACES
Role of designer
– Visual Design decisions
– To create
• Innovative
• Functional
• Aesthetically pleasing solutions
Process of good design
– Interface designers
– Must maintain
• Attitude of unbiased discovery
• Empathy for user
– Clearly defined goals

VISUAL DESIGN PRINCIPLES FOR USABLE

12/28/2017 6
INTEFACES
 Information Design Process
• Method of visually structuring and organising
information
• Not superficial
• Not decorative
Audit Development Implementation

1 2 3 4 5 6

Define Examine Design Test Embed Monitor

VISUAL DESIGN PRINCIPLES FOR USABLE

12/28/2017 7
INTEFACES
 Well designed solution
Motivate users
Increase ease of user and accessibility
Increase accuracy and retention of the
information
Focus on needs of its users

VISUAL DESIGN PRINCIPLES FOR USABLE

12/28/2017 8
INTEFACES
 Phase 1: the audit
Blueprint
Asking and answering number of questions
Acknowledging ongoing changes
To create an eloquent design
– Audit Question A
– Audit Question B

VISUAL DESIGN PRINCIPLES FOR USABLE

12/28/2017 9
INTEFACES
 Audit Question A
 Who are the product users?
 How will this product be used?
 When will this product be used?
 Why will this product be used?
 Where will this product be used?
 How will the process evolve to support this
product as it evolves?

VISUAL DESIGN PRINCIPLES FOR USABLE

12/28/2017 10
INTEFACES
 Audit Question B
 What is the most efficient,effective way for user
to accompolish a set of tasks and move on to the
next set of tasks?
 How can the information required for the product
ease of use be presented most efficiently and
effectively?
 How can the design of this product be done to
support ease of use and transition from task to
task as a seamless,transparent,and even
pleasurable experience?
 What are the technical and organisational limits
and constraints?
VISUAL DESIGN PRINCIPLES FOR USABLE
12/28/2017 11
INTEFACES
 Phase 2: Design Development
Audit report as a guideline
Design and Testing
Solutions are more defined
Prototype design is tested, approved and
specified

VISUAL DESIGN PRINCIPLES FOR USABLE

12/28/2017 12
INTEFACES
 Phase 3:Implementation and
Monitoring
Creation of training materials and other
reinforcements that enhance the use and
productivity
Continuous monitoring
Evolutionary process of design and
development
Changes results in revaluation and redesign

VISUAL DESIGN PRINCIPLES FOR USABLE

12/28/2017 13
INTEFACES
 Interaction design
– Bridges
• Visual design
• Information presentation
• Usability with aesthetics
 Effective design
– Rigirous study
– Concern for organisation
– Usability combined with
• Harmony
• Balance
– Symmetry
– asymmetry
• simplicity

VISUAL DESIGN PRINCIPLES FOR USABLE

12/28/2017 14
INTEFACES
 Criteria for good design
Is it appropriate?
Is it durable?
Is it verifiable?
Does it have impact?
Is it cost effective?

VISUAL DESIGN PRINCIPLES FOR USABLE

12/28/2017 15
INTEFACES
 Typography
Visual representation of spoken and unspoken
thought
Involves in organising text
Made from type

VISUAL DESIGN PRINCIPLES FOR USABLE

12/28/2017 16
INTEFACES
 Type Family
Roman Roman
Italic Oblique
Bold Condensed
Bold Italic Condensed Oblique
Black
Black Italic
Ultra
Ultra Italic
Legibility and Readability
cl d
clean dean

b h
ball hall
VISUAL DESIGN PRINCIPLES FOR USABLE
12/28/2017 17
INTEFACES
 How human eyes sees then reads
Outline word shapes and their internal
patterns
Saccadic movement

Now Read This

Now Read This
Now Read This

VISUAL DESIGN PRINCIPLES FOR USABLE

12/28/2017 18
INTEFACES
 Type face and type selection
Serif and Sans serif
Families of type
– Old style
– Transitional
– Modern
– Egyptian
– Contemporary

VISUAL DESIGN PRINCIPLES FOR USABLE

12/28/2017 19
INTEFACES
 Variation in letter forms

VISUAL DESIGN PRINCIPLES FOR USABLE

12/28/2017 20
INTEFACES
 Typographic guidelines
Combining typefaces
– Serif and sanserif
– Harmony/contrast important
– Must not confuse reader
Contrast in weight
– May not create compatible environment
Output device and viewing environment
– Differs with devices

VISUAL DESIGN PRINCIPLES FOR USABLE

12/28/2017 21
INTEFACES
Ctd..
 Letter spacing and word spacing
– Letter spacing leads to readability

 Line spacing/leading
– Visual adjustment

 Line length/column width

– 39 – 52 characters

VISUAL DESIGN PRINCIPLES FOR USABLE

12/28/2017 22
INTEFACES
Ctd..
Justified vs ragged right
– Leaves uneven word spacing
– Rivers

Highlighting with type

– Use only one highlighting technique

Decorative typefaces
– Must not distract from overall message
VISUAL DESIGN PRINCIPLES FOR USABLE
12/28/2017 23
INTEFACES
Positive and negative type
– Black on white
– White on black

VISUAL DESIGN PRINCIPLES FOR USABLE

12/28/2017 24
INTEFACES