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
Agenda:

The Role of Graphic Design

Principles of Graphic Design
Animation/Rollovers
Typography
Color
Icons

Sep 21, Fall 2006 IAT 410 15

Role of Graphic Design
The “look and feel” portion of an interface:
What someone initially encounters

Sep 21, Fall 2006 IAT 410 16

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 17

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 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

Agenda:

The Role of Graphic Design

Principles of Graphic Design
Animation/Rollovers
Typography
Color
Icons

Sep 21, Fall 2006 IAT 410 24

Principles of Graphic Design

Concept/Metaphor
Hierarchy
Clarity
Consistency
Alignment
Proximity
Contrast

Sep 21, Fall 2006 IAT 410 25

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 26

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 27

Principles: Hierarchy

What are the relative “levels” of importance?

What should the user see first? Second?

Sep 21, Fall 2006 IAT 410 28

Principles: Hierarchy

What are the relative “levels” of importance?

Sep 21, Fall 2006 IAT 410 29

Principles: Hierarchy

Sep 21, Fall 2006 IAT 410 30

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 31

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 32

Principles: Clarity

White space

Sep 21, Fall 2006 IAT 410 33

Principles: Clarity

Sep 21, Fall 2006 IAT 410 34

Principles: Clarity

White space

Sep 21, Fall 2006 IAT 410 35

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 36

Principles: Alignment

Western world
Start from top left

Allows eye to parse display more easily

Sep 21, Fall 2006 IAT 410 37

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 38

Principles: Alignment

Grids - use them

Sep 21, Fall 2006 IAT 410 39

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 40

Principles: Alignment
Left, center, or right
Here is Here is
Here is
some some
some
new text new text
new text
Ragged right or justified
Choose one, use it everywhere

Novices often center things

Hard to read!
No definition, calm, very formal
Use only in small quantities

Sep 21, Fall 2006 IAT 410 41

Principles: Proximity

Items close together appear to have a relationship

Large distance implies -- no relationship

Time

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: 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 44

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 45

Agenda:

The Role of Graphic Design

Principles of Graphic Design
Animation/Rollovers
Typography
Color
Icons

Sep 21, Fall 2006 IAT 410 46

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 47

Agenda:

The Role of Graphic Design

Principles of Graphic Design
Animation/Rollovers
Typography
Color
Icons

Sep 21, Fall 2006 IAT 410 48

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 49
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 50
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 51

Agenda:

The Role of Graphic Design

Principles of Graphic Design
Animation/Rollovers
Typography
Color
Icons

Sep 21, Fall 2006 IAT 410 52

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 53

Color

Use it for a purpose, not to just add some color in

Sep 21, Fall 2006 IAT 410 54

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 55

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 56

How many small rectangles

Sep 21, Fall 2006 IAT 410 57

How many small rectangles

Sep 21, Fall 2006 IAT 410 58

How many small ovals

Sep 21, Fall 2006 IAT 410 59

How many small ovals

Sep 21, Fall 2006 IAT 410 60

Find the R

Sep 21, Fall 2006 IAT 410 61

Find the...

V C
M
R G
T
Q D P
F
A
Z
W
J

Sep 21, Fall 2006 IAT 410 62

Find the T

Sep 21, Fall 2006 IAT 410 63

Find the...

V C
M
R G
T
Q D P
F
A
Z
W
J

Sep 21, Fall 2006 IAT 410 64

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 65

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 66

Color Palette

Example of Color hierarchy

Sep 21, Fall 2006 IAT 410 67

Color Associations
Culturally specific,
contextually specific

Red Yellow
hot, warning, happy, caution, joy
aggression, love Brown
Pink warm, fall, dirt, earth
female, cute, cotton Green
candy lush, pastoral, envy
Orange Purple
autumn, warm, royal, sophisticated,
Halloween, Cell phone Barney

Sep 21, Fall 2006 IAT 410 68

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 69

Agenda:

The Role of Graphic Design

Principles of Graphic Design
Animation/Rollovers
Typography
Color
Icons

Sep 21, Fall 2006 IAT 410 70

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 71

Icon Design

Represent object or action in a familiar and

recognizable manner

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 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 75

Icon Legibility Settlers III

Sep 21, Fall 2006 IAT 410 76

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 77

Icon Design

Is the symbolic aspect of the icon meaningful?

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

Meaning is ASCRIBED to icons -- they don’t have

an essential, measurable “essence.”

Sep 21, Fall 2006 IAT 410 81

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 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

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 85

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 86

WarCraft II
Culture manifests itself:
What they eat
How they work
How they live
How they kill
How they die
How they live:
Choice of building materials
Choice of fighting styles

Sep 21, Fall 2006 IAT 410 87

WarCraft II

How Orcs live & eat

Hog farms
How humans
Grain farms

Sep 21, Fall 2006 IAT 410 88

WarCraft II

Orcs do war with offensive spells

Humans have defensive spells

Sep 21, Fall 2006 IAT 410 89

WarCraft II

Orc People
Green
Horns
Orc Buildings
Bone
Leather
Dark Cast Iron

Sep 21, Fall 2006 IAT 410 90

WarCraft II

Human People
“Flesh tone” humans
Silver armor
Human buildings
Light wood
Light-colored metal (roofs, etc)

Sep 21, Fall 2006 IAT 410 91

WarCraft II
Invading Orc Town

Sep 21, Fall 2006 IAT 410 92

Examples
Invading human town

Sep 21, Fall 2006 IAT 410 93

WarCraft II

Sep 21, Fall 2006 IAT 410 94

WarCraft II

Sep 21, Fall 2006 IAT 410 95

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 96

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 97

Age of Empires/Kings

Historical building style

Historical costume

Sep 21, Fall 2006 IAT 410 98

Celts

Sep 21, Fall 2006 IAT 410 99

Celts

Sep 21, Fall 2006 IAT 410 100

Vikings

Sep 21, Fall 2006 IAT 410 101

Vikings

Sep 21, Fall 2006 IAT 410 102

China

Sep 21, Fall 2006 IAT 410 103

China

Sep 21, Fall 2006 IAT 410 104

Persia

Sep 21, Fall 2006 IAT 410 105

Turks

Sep 21, Fall 2006 IAT 410 106

Turks

Sep 21, Fall 2006 IAT 410 107

Byzantium

Sep 21, Fall 2006 IAT 410 108

Age of Kings

Problems
Tough to recognize foreign buildings
Tough to recognize own buildings
Where’s my stables?
All Castles look very similar

Sep 21, Fall 2006 IAT 410 109