3. “We learn to describe the
things we see, but we also
see the things we can
describe.”
“Word Games” by David Womack, Print Magazine, October 2006.
3
4. This Session Includes:
A survey of design principles.
A framework for understanding design practice.
Language for communicating clearly about design.
Resources for further learning.
4
14. A Teacher’s Day
With children from 7:30am to 3:30pm.
Often takes lunch with the children.
Rarely has more than 5-10 minutes during the
work day to do admin work.
Might have a classroom computer.
Do a lot of work on their home computers.
32
12
17. needs
superintendent To know how well schools are performing
/|
principals To know how well teachers are performing
To manage many teachers
/|
teachers To know their privacy is protected
15
18. Know Who Your Users Are
You must know and design
for all of your users.
16
22. surface
Concrete
What will the finished product
look like?
surface
skeleton
What components will enable
people to use the site?
skeleton
structure
How will the pieces of the site fit
structure together?
scope
scope What features will the site need to
include?
strategy
strategy Abstract
What do we want to get out of the
site? What do our users want?
20
23. surface
Concrete
What will the finished product
look like?
surface
skeleton
What components will enable
people to use the site?
skeleton
structure
How will the pieces of the site fit
structure together?
scope
scope What features will the site need to
include?
strategy
strategy Abstract
What do we want to get out of the
site? What do our users want?
21
24. surface
Concrete
What will the finished product
look like?
surface
skeleton
What components will enable
people to use the site?
skeleton
structure
How will the pieces of the site fit
structure together?
scope
scope What features will the site need to
include?
strategy
strategy Abstract
What do we want to get out of the
site? What do our users want?
22
25. surface
Concrete
What will the finished product
look like?
surface
skeleton
What components will enable
people to use the site?
skeleton
structure
How will the pieces of the site fit
structure together?
scope
scope What features will the site need to
include?
strategy
strategy Abstract
What do we want to get out of the
site? What do our users want?
23
26. surface
Concrete
What will the finished product
look like?
surface
skeleton
What components will enable
people to use the site?
skeleton
structure
How will the pieces of the site fit
structure together?
scope
scope What features will the site need to
include?
strategy
strategy Abstract
What do we want to get out of the
site? What do our users want?
24
27. strategy Concrete
surface
What do we
skeleton
want to get out
of the site?
structure
What do our scope
users want?
strategy Abstract
25
28. Your
Your
User’s
Goals
Needs
Strategic Sweet Spot:
Where user needs and your goals meet. 26
29. Your
Your
User’s
Goals
Needs
Strategic Sweet Spot:
Where user needs and your goals meet. 26
72. skeleton Concrete
surface
What
skeleton
components will
enable people to
use the site? structure
scope
strategy Abstract
53
73. Make finding things easy
discoverability
Actions should be
recoverability without cost
A sense of time, place,
context
and meaning
How the system
feedback
responds
Four Principles of
Interaction Design 54
102. The job requires extra pluck
graphic
The five boxing wizards jump
front tab back tab back tab
heading
dropdown
text field text field Pack my box $12.73
text field Back in June $56.47
The job requires extra pluck and zeal from every young
graphic The job $128.75
wage earner. The five boxing wizards jump quickly. Six big Five boxing $19.21
heading juicy steaks sizzled in a pan as five workmen left the Six big steaks $44.19
quarry. Five wine experts jokingly quizzed sample chablis.
• Pack my box with five
label Total $991.31
dozen liquor jugs.
• Back in June we
button
delivered oxygen
heading button
• The job requires extra
pluck and zeal
• The five boxing wizards dropdown document output cycle effective
jump quickly.
• Six big juicy steaks document 04/15/05 04/15/05 04/15/05
address graphic
sizzled in a pan
document 04/15/05 04/15/05 04/15/05
city
Six big juicy steaks
Pack my box with five
document 04/15/05 04/15/05 04/15/05
sizzled in a pan as five
state zip dozen liquor jugs.
workmen left the quarry.
document 04/15/05 04/15/05 04/15/05
Back in June we
Five wine experts
selected checkbox delivered oxygen
jokingly quizzed sample
document 04/15/05 04/15/05 04/15/05
equipment
chablis.
label
selected
list box item document 04/15/05 04/15/05 04/15/05
label
highlighted item unselected front tab
back tab
unselected radio document 04/15/05 04/15/05 04/15/05
list box item
selected radio document 04/15/05 04/15/05 04/15/05
list box item dropdown list box item
unselected radio
highlighted item
dropdown list box item
list box item
label label
dropdown dropdown collapsed button
selected radio button selected radio button
button selected checkbox unselected radio button button unselected radio button button
Action at a Distance
80
103. The job requires extra pluck
graphic
The five boxing wizards jump
front tab back tab back tab
heading
dropdown
text field text field Pack my box $12.73
text field Back in June $56.47
The job requires extra pluck and zeal from every young
graphic The job $128.75
wage earner. The five boxing wizards jump quickly. Six big Five boxing $19.21
heading juicy steaks sizzled in a pan as five workmen left the Six big steaks $44.19
quarry. Five wine experts jokingly quizzed sample chablis.
• Pack my box with five
label Total $991.31
dozen liquor jugs.
• Back in June we
button
delivered oxygen
heading button
• The job requires extra
pluck and zeal
• The five boxing wizards dropdown document output cycle effective
jump quickly.
• Six big juicy steaks document 04/15/05 04/15/05 04/15/05
address graphic
sizzled in a pan
document 04/15/05 04/15/05 04/15/05
city
Six big juicy steaks
Pack my box with five
document 04/15/05 04/15/05 04/15/05
sizzled in a pan as five
state zip dozen liquor jugs.
workmen left the quarry.
document 04/15/05 04/15/05 04/15/05
Back in June we
Five wine experts
selected checkbox delivered oxygen
jokingly quizzed sample
document 04/15/05 04/15/05 04/15/05
equipment
chablis.
label
selected
list box item document 04/15/05 04/15/05 04/15/05
label
highlighted item unselected front tab
back tab
unselected radio document 04/15/05 04/15/05 04/15/05
list box item
selected radio document 04/15/05 04/15/05 04/15/05
list box item dropdown list box item
unselected radio
highlighted item
dropdown list box item
list box item
label label
dropdown dropdown collapsed button
selected radio button selected radio button
button selected checkbox unselected radio button button unselected radio button button
Action at a Distance
80
104. The job requires extra pluck
graphic
The five boxing wizards jump
front tab back tab back tab
heading
dropdown
text field text field Pack my box $12.73
text field Back in June $56.47
The job requires extra pluck and zeal from every young
graphic The job $128.75
wage earner. The five boxing wizards jump quickly. Six big Five boxing $19.21
heading juicy steaks sizzled in a pan as five workmen left the Six big steaks $44.19
quarry. Five wine experts jokingly quizzed sample chablis.
• Pack my box with five
label Total $991.31
dozen liquor jugs.
• Back in June we
button
delivered oxygen
heading button
• The job requires extra
pluck and zeal
• The five boxing wizards dropdown document output cycle effective
jump quickly.
• Six big juicy steaks document 04/15/05 04/15/05 04/15/05
address graphic
sizzled in a pan
document 04/15/05 04/15/05 04/15/05
city
Six big juicy steaks
Pack my box with five
document 04/15/05 04/15/05 04/15/05
sizzled in a pan as five
state zip dozen liquor jugs.
workmen left the quarry.
document 04/15/05 04/15/05 04/15/05
Back in June we
Five wine experts
selected checkbox delivered oxygen
jokingly quizzed sample
document 04/15/05 04/15/05 04/15/05
equipment
chablis.
label
selected
list box item document 04/15/05 04/15/05 04/15/05
label
highlighted item unselected front tab
back tab
unselected radio document 04/15/05 04/15/05 04/15/05
list box item
selected radio document 04/15/05 04/15/05 04/15/05
list box item dropdown list box item
unselected radio
highlighted item
dropdown list box item
list box item
label label
dropdown dropdown collapsed button
selected radio button selected radio button
button selected checkbox unselected radio button button unselected radio button button
Action at a Distance
80
105. The job requires extra pluck
graphic
The five boxing wizards jump
front tab back tab back tab
heading
dropdown
text field text field Pack my box $12.73
text field Back in June $56.47
The job requires extra pluck and zeal from every young
graphic The job $128.75
wage earner. The five boxing wizards jump quickly. Six big Five boxing $19.21
heading juicy steaks sizzled in a pan as five workmen left the Six big steaks $44.19
quarry. Five wine experts jokingly quizzed sample chablis.
• Pack my box with five
label Total $991.31
dozen liquor jugs.
• Back in June we
button
delivered oxygen
heading button
• The job requires extra
pluck and zeal
• The five boxing wizards dropdown document output cycle effective
jump quickly.
• Six big juicy steaks document 04/15/05 04/15/05 04/15/05
address graphic
sizzled in a pan
document 04/15/05 04/15/05 04/15/05
city
Six big juicy steaks
Pack my box with five
document 04/15/05 04/15/05 04/15/05
sizzled in a pan as five
state zip dozen liquor jugs.
workmen left the quarry.
document 04/15/05 04/15/05 04/15/05
Back in June we
Five wine experts
selected checkbox delivered oxygen
jokingly quizzed sample
document 04/15/05 04/15/05 04/15/05
equipment
chablis.
label
selected
list box item document 04/15/05 04/15/05 04/15/05
label
highlighted item unselected front tab
back tab
unselected radio document 04/15/05 04/15/05 04/15/05
list box item
selected radio document 04/15/05 04/15/05 04/15/05
list box item dropdown list box item
unselected radio
highlighted item
dropdown list box item
list box item
label label
dropdown dropdown collapsed button
selected radio button selected radio button
button selected checkbox unselected radio button button unselected radio button button
Action at a Distance
80
106. The job requires extra pluck
graphic
The five boxing wizards jump
front tab back tab back tab
heading
dropdown
text field text field Pack my box $12.73
text field Back in June $56.47
The job requires extra pluck and zeal from every young
graphic The job $128.75
wage earner. The five boxing wizards jump quickly. Six big Five boxing $19.21
heading juicy steaks sizzled in a pan as five workmen left the Six big steaks $44.19
quarry. Five wine experts jokingly quizzed sample chablis.
• Pack my box with five
label Total $991.31
dozen liquor jugs.
• Back in June we
button
delivered oxygen
heading button
• The job requires extra
pluck and zeal
• The five boxing wizards dropdown document output cycle effective
jump quickly.
• Six big juicy steaks document 04/15/05 04/15/05 04/15/05
address graphic
sizzled in a pan
document 04/15/05 04/15/05 04/15/05
city
Six big juicy steaks
Pack my box with five
document 04/15/05 04/15/05 04/15/05
sizzled in a pan as five
state zip dozen liquor jugs.
workmen left the quarry.
document 04/15/05 04/15/05 04/15/05
Back in June we
Five wine experts
selected checkbox delivered oxygen
jokingly quizzed sample
document 04/15/05 04/15/05 04/15/05
equipment
chablis.
label
selected
list box item document 04/15/05 04/15/05 04/15/05
label
highlighted item unselected front tab
back tab
unselected radio document 04/15/05 04/15/05 04/15/05
list box item
selected radio document 04/15/05 04/15/05 04/15/05
list box item dropdown list box item
unselected radio
highlighted item
dropdown list box item
list box item
label label
dropdown dropdown collapsed button
selected radio button selected radio button
button selected checkbox unselected radio button button unselected radio button button
Action at a Distance
80
107. Make finding things easy
discoverability
Actions should be
recoverability without cost
A sense of time, place,
context
and meaning
How the system
feedback
responds
Four Principles of
Interaction Design 81
108. surface Concrete
surface
What will the
skeleton
finished product
look like?
structure
scope
strategy Abstract
82
114. “Even if a website is highly
usable and provides very
useful information presented
in a logical arrangement, it
may fail to impress a user
whose first impression of the
site was negative.”
Dr. Gitte Lindgaard, Carleton University
108
87
128. Resources
The Non-Designer’s Design Book
by Robin Williams
About Face 2.0: The Essentials of Interaction Design
by Alan Cooper
Information Architecture for the World Wide Web
by Louis Rosenfeld and Peter Morville
Observing the User Experience
by Mike Kuniavsky
The Elements of User Experience
by Jesse James Garrett
David Verba | Dir. of Technology
http://www.adaptivepath.com/slides/railsconf2007.pdf Adaptive Path
david@adaptivepath.com
97