graphic design the “look & feel” the system of imagery
TRANSCRIPT
Graphic Design
The “look & feel”
The system of imagery
Graphic Design
It shares aspects of engineering, but with aesthetic, communicative aspects and consumer appeal.
Graphic Design
As a practice, it has been around for thousands of years.
Graphic Design
With the industrial revolution, art and design began to diverge.
Graphic Design
In the US, it grew into a profession after WWII.
Graphic Design
It relies on a BALANCE and integration of:
& feel
Graphic Design
Objective: relies on quantitative studies, like usability and legibility measures. Does the “look and feel” work?
Graphic Design
Subjective: “look and feel” relies on subjective judgement by experts, depends on contextual factors.
Graphic Design
Subjective: “look and feel” Culture is learned, cultural meanings change, meanings can be multiple. Uniqueness is valued (not programmable).
Graphic Design
You cannot empirically measure its subjective aspects, but it is rigorous in its own epistemological realm (knowledge base).
Graphic Design
It is rigorous in its own epistemological realm.
1. Graphic Design experts.
vs.
2. Deploying graphic design principles (anybody).
Graphic Design
So what?
Deploying graphic design principles will:
- enhance your ability to communicate w/designers
& feel
Graphic Design
Deploying graphic design principles will:
- enable you to create more user-friendly interfaces
Graphic Design
Deploying graphic design principles will:
- enhance the knowledge base of HCI, which is increasingly necessary with millions of users
Sep 21, Fall 2006 IAT 410 15
Agenda:
The Role of Graphic Design
Principles of Graphic Design
Animation/Rollovers
Typography
Color
Icons
Sep 21, Fall 2006 IAT 410 16
Role of Graphic Design
The “look and feel” portion of an interface:
What someone initially encounters
Sep 21, Fall 2006 IAT 410 17
Role of Graphic Design
The “look and feel” portion of an interface:
What someone initially encounters
Sets a framework for understanding content
Conveys an impression, mood
Sep 21, Fall 2006 IAT 410 18
Role of Graphic Design
The “look and feel” portion of an interface:
What someone initially encounters
Sets a framework for understanding content
Sep 21, Fall 2006 IAT 410 19
Role of Graphic Design
The “look and feel” portion of an interface:
What someone initially encounters
Sets a framework for understanding content
Sep 21, Fall 2006 IAT 410 20
Role of Graphic Design
The “look and feel” portion of an interface:
What someone initially encounters
Sets a framework for understanding content
Sep 21, Fall 2006 IAT 410 21
Role of Graphic Design
The “look and feel” portion of an interface:
What someone initially encounters
Sets a framework for understanding content
Sep 21, Fall 2006 IAT 410 22
Role of Graphic Design
The “look and feel” portion of an interface:
What someone initially encounters
Sets a framework for understanding content
Sep 21, Fall 2006 IAT 410 23
Role of Graphic Design
The “look and feel” portion of an interface:
What someone initially encounters
Sets a framework for understanding content
Sep 21, Fall 2006 IAT 410 24
Agenda:
The Role of Graphic Design
Principles of Graphic Design
Animation/Rollovers
Typography
Color
Icons
Sep 21, Fall 2006 IAT 410 25
Principles of Graphic Design
Concept/Metaphor
Hierarchy
Clarity
Consistency
Alignment
Proximity
Contrast
Sep 21, Fall 2006 IAT 410 26
Principles: Concept/Metaphor
Concept: what is the overarching idea that every visual aspect of the interface relates to? (It MUST be relevant)
Metaphor: (Means of “explaining” concept) If you’re building an interface for a grocery application, maybe mimic a person walking through a store with a cart.
Sep 21, Fall 2006 IAT 410 27
Principles: Concept/Metaphor
Concept: what is the overarching idea that every visual aspect of the interface relates to? (It MUST be relevant)
Apple: accessible, fun, familiar; “for the rest of us”
Metaphor: (Means of “explaining” concept) If you’re building an interface for a grocery application, maybe mimic a person walking through a store with a cart. desktop metaphor
Sep 21, Fall 2006 IAT 410 28
Principles: Hierarchy
What are the relative “levels” of importance?
What should the user see first? Second?
Sep 21, Fall 2006 IAT 410 29
Principles: Hierarchy
What are the relative “levels” of importance?
Sep 21, Fall 2006 IAT 410 30
Principles: Hierarchy
.
Sep 21, Fall 2006 IAT 410 31
Principles: Clarity
Every element in an interface should have a reason for being there
Make that reason clear!
Less is more
Sep 21, Fall 2006 IAT 410 32
Principles: Clarity
White space
Leads the eye
Provides symmetry and balance through its use
Strengthens impact of message
Allows eye to rest between elements of activity (increases legibility)
Used to promote simplicity, elegance, refinement
Sep 21, Fall 2006 IAT 410 33
Principles: Clarity
White space
Sep 21, Fall 2006 IAT 410 34
Principles: Clarity
Sep 21, Fall 2006 IAT 410 35
Principles: Clarity
White space
Sep 21, Fall 2006 IAT 410 36
Principles: Consistency
Be consistent in every aspect:
In layout, color, images, icons, typography, text
Within screen, across screens
Stay within metaphor everywhere
Platform may have a style guide -- follow it!
Sep 21, Fall 2006 IAT 410 37
Principles: Alignment
Western world
Start from top left
Allows eye to parse display more easily
Sep 21, Fall 2006 IAT 410 38
Principles: Alignment
Grids
(Hidden) horizontal and vertical lines to help locate window components
Align related things
Group items logically
Minimize number of controls, reduce clutter
Sep 21, Fall 2006 IAT 410 39
Principles: Alignment
Grids - use them
Sep 21, Fall 2006 IAT 410 40
Principles: Alignment
Grids
(Hidden) horizontal and vertical lines to help locate window components
Align related things
Group items logically
Minimize number of controls, reduce clutter
Sep 21, Fall 2006 IAT 410 41
Principles: Alignment
Left, center, or right
Ragged right or justifiedChoose one, use it everywhere
Novices often center thingsHard to read!No definition, calm, very formalUse only in small quantities
Here is somenew text
Here is some
new text
Here issome
new text
Sep 21, Fall 2006 IAT 410 42
Principles: Proximity
Items close together appear to have a relationship
Large distance implies -- no relationship
Time
Sep 21, Fall 2006 IAT 410 43
Principles: Proximity
Items close together appear to have a relationship
Large distance implies -- no relationship
Time
Sep 21, Fall 2006 IAT 410 44
Principles: Contrast
Pulls you in
Guides your eyes around the interface
Supports skimming
Take advantage of contrast to guide user through hierarchy of information; add focus; or to energize an interface with “texture”
Can be used to distinguish active control
Sep 21, Fall 2006 IAT 410 45
Principles: Contrast
Can be used to set off most important item
Allow it to dominate
Ask yourself what is the most important item in the interface, highlight it
Use geometry to help sequencing
Sep 21, Fall 2006 IAT 410 46
Agenda:
The Role of Graphic Design
Principles of Graphic Design
Animation/Rollovers
Typography
Color
Icons
Sep 21, Fall 2006 IAT 410 47
Animation/Rollovers
Blinking
Good for grabbing attention, but easily becomes obnoxious; use very sparingly
Reverse video, bold
Good for making something stand out
Sep 21, Fall 2006 IAT 410 48
Agenda:
The Role of Graphic Design
Principles of Graphic Design
Animation/Rollovers
Typography
Color
Icons
Sep 21, Fall 2006 IAT 410 49
Typography: White space
White space
Leads the eye
Provides symmetry and balance through its use
Strengthens impact of message
Allows eye to rest between elements of
activity (increases legibility)
Used to promote simplicity, elegance, refinement
Sep 21, Fall 2006 IAT 410 50
Typography: Hierarchy
How do you lead the user through visual
information (by visual means)?
Some traditional navigation devices (conventions):Size
Color
Composition (where it is on the rectangle)
Page numbers
Type and Image emphases
Sep 21, Fall 2006 IAT 410 51
Typography
Characters and symbols should be easily noticeable and distinguishable
AVOID HEAVY USE OF ALL UPPERCASE
Studies have found that: mixed case promotes fastest reading and that 55 characters per line is optimal
Sep 21, Fall 2006 IAT 410 52
Agenda:
The Role of Graphic Design
Principles of Graphic Design
Animation/Rollovers
Typography
Color
Icons
Sep 21, Fall 2006 IAT 410 53
Color Attributes
Hue
native color, pigment
Saturation
relative purity, brightness, or intensity of a color
Value
lightness or darkness of a color
Sep 21, Fall 2006 IAT 410 54
Color
Use it for a purpose, not to just add some color in
Sep 21, Fall 2006 IAT 410 55
Color Guidelines
Display color images on black background
Avoid brown and green as background colors
Be sure foreground colors contrast (in both brightness and hue) with background colors
Sep 21, Fall 2006 IAT 410 56
Color Guidelines
Use color sparingly--Design in b/w then add color where appropriate
Use color to draw attention, communicate organization, to indicate status, to establish relationships
Avoid using color in non-task related ways
(experiment coming next)
Sep 21, Fall 2006 IAT 410 57
How many small rectangles
Sep 21, Fall 2006 IAT 410 58
How many small rectangles
Sep 21, Fall 2006 IAT 410 59
How many small ovals
Sep 21, Fall 2006 IAT 410 60
How many small ovals
Sep 21, Fall 2006 IAT 410 61
Find the R
Sep 21, Fall 2006 IAT 410 62
Find the...
V
R
Z
M
F
G
Q
J
C
TD
W
A
P
Sep 21, Fall 2006 IAT 410 63
Find the T
Sep 21, Fall 2006 IAT 410 64
Find the...
V
R
Z
M
F
G
Q
J
C
TD
W
A
P
Sep 21, Fall 2006 IAT 410 65
Color Guidelines
Color is good for supporting search
Do not use color without another redundant cue
Color-blindness
Monochrome monitors
Redundant coding enhances performance
Be consistent with color associations from jobs and cultures
Sep 21, Fall 2006 IAT 410 66
Color Guidelines
Limit coding to 8 distinct colors (4 better)
Avoid using saturated blues for text or small, thin lines
Use color on b/w or gray, or b/w on color
To express difference, use high contrast colors (and vice versa)
Make sure colors do not “vibrate”
Sep 21, Fall 2006 IAT 410 67
Color Palette
Example of Color hierarchy
Sep 21, Fall 2006 IAT 410 68
Color Associations
Red
hot, warning,
aggression, love
Pink
female, cute, cotton candy
Orange
autumn, warm, Halloween, Cell phone
Yellow
happy, caution, joy
Brown
warm, fall, dirt, earth
Green
lush, pastoral, envy
Purple
royal, sophisticated, Barney
Culturally specific, contextually specific
Sep 21, Fall 2006 IAT 410 69
Color Palettes/Suites
Designers often pick a palette of 4 or 5 colors
Variations of 2 colors
Monochromatic (variations of 1 color)
Southwestern (culturally evocative)
Sep 21, Fall 2006 IAT 410 70
Agenda:
The Role of Graphic Design
Principles of Graphic Design
Animation/Rollovers
Typography
Color
Icons
Sep 21, Fall 2006 IAT 410 71
Icon Design
Relies on drawing ability -- hire someone to do it
(here are standards and ways to critique icon design)
Avoid meaningless, gratuitous use of icons
Too many icons quickly become illegible
Sep 21, Fall 2006 IAT 410 72
Icon Design
Represent object or action in a familiar and recognizable manner
Sep 21, Fall 2006 IAT 410 73
Icon Design
Represent object or action in a familiar and recognizable manner
Sep 21, Fall 2006 IAT 410 74
Icon Design
Represent object or action in a familiar and recognizable manner
Sep 21, Fall 2006 IAT 410 75
Icon Legibility
Limit number of different icons
Make icon stand out from background
Ensure that a singly selected icon is clearly visible when surrounded by unselected ones
Sep 21, Fall 2006 IAT 410 76
Icon Legibility Settlers III
Sep 21, Fall 2006 IAT 410 77
Icon Legibility
Make each icon distinctive (legible)
but
Make icons harmonious members of icon family
Avoid excessive detail
Accompany with names
(though it shouldn’t be necessary)
Sep 21, Fall 2006 IAT 410 78
Icon Design
Is the symbolic aspect of the icon meaningful?
Sep 21, Fall 2006 IAT 410 79
Icon Design
Is the symbolic aspect of the icon meaningful?
Sep 21, Fall 2006 IAT 410 80
Icon Design
Is the symbolic aspect of the icon meaningful?
Sep 21, Fall 2006 IAT 410 81
Icon Design
Meaning is ASCRIBED to icons -- they don’t have an essential, measurable “essence.”
Sep 21, Fall 2006 IAT 410 82
Role of Graphic Design in HCI
The “look and feel” portion of an interface:
What someone initially encounters
Sets a framework for understanding content
Sep 21, Fall 2006 IAT 410 83
Role of Graphic Design in HCI
The “look and feel” portion of an interface:
What someone initially encounters
Sets a framework for understanding content
Sep 21, Fall 2006 IAT 410 84
Role of Graphic Design in HCI
The “look and feel” portion of an interface:
What someone initially encounters
Sets a framework for understanding content
Sep 21, Fall 2006 IAT 410 85
Graphic Design
Like any design job, there must be a logic to the visual design
The logic drives
Color scheme
Materials choices
Lighting style
Fonts
etc.
Sep 21, Fall 2006 IAT 410 86
Eacmples - WarCraft II
2 Teams: Orcs & Humans
Each team has unique biology:
Collection of Team physiques
Unique means of living
Unique culture
Sep 21, Fall 2006 IAT 410 87
WarCraft II
Culture manifests itself:What they eatHow they workHow they liveHow they killHow they die
How they live:Choice of building materialsChoice of fighting styles
Sep 21, Fall 2006 IAT 410 88
WarCraft II
How Orcs live & eat
Hog farms
How humans
Grain farms
Sep 21, Fall 2006 IAT 410 89
WarCraft II
Orcs do war with offensive spells
Humans have defensive spells
Sep 21, Fall 2006 IAT 410 90
WarCraft II
Orc People
Green
Horns
Orc Buildings
Bone
Leather
Dark Cast Iron
Sep 21, Fall 2006 IAT 410 91
WarCraft II
Human People
“Flesh tone” humans
Silver armor
Human buildings
Light wood
Light-colored metal (roofs, etc)
Sep 21, Fall 2006 IAT 410 92
WarCraft II
Invading Orc Town
Sep 21, Fall 2006 IAT 410 93
Examples
Invading human town
Sep 21, Fall 2006 IAT 410 94
WarCraft II
Sep 21, Fall 2006 IAT 410 95
WarCraft II
Sep 21, Fall 2006 IAT 410 96
WarCraft II Problems
This stark contrast causes problems
Why are Orcs chopping wood?
Why is the Orc woodshed a big, hollow log?
Violates the Orc bone-and-leather look
On the sea, similar problems
These problems arise because of game play
Sep 21, Fall 2006 IAT 410 97
Example: Age of Empires/Kings
Logic: Numerous historical civilizations do battle
Each civilization specializes
Special force elements
Special resource-gathering
Special Wonders-of-the-world
Sep 21, Fall 2006 IAT 410 98
Age of Empires/Kings
Historical building style
Historical costume
Sep 21, Fall 2006 IAT 410 99
Celts
Sep 21, Fall 2006 IAT 410 100
Celts
Sep 21, Fall 2006 IAT 410 101
Vikings
Sep 21, Fall 2006 IAT 410 102
Vikings
Sep 21, Fall 2006 IAT 410 103
China
Sep 21, Fall 2006 IAT 410 104
China
Sep 21, Fall 2006 IAT 410 105
Persia
Sep 21, Fall 2006 IAT 410 106
Turks
Sep 21, Fall 2006 IAT 410 107
Turks
Sep 21, Fall 2006 IAT 410 108
Byzantium
Sep 21, Fall 2006 IAT 410 109
Age of Kings
Problems
Tough to recognize foreign buildings
Tough to recognize own buildings
Where’s my stables?
All Castles look very similar