SNS College of Engineering
Department of Computer Science and
Engineering
Web Interface Design
Presented by
[Link]
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