4. “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
5. 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
25. 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.
22
32
28. 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
25
32. 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?
29
33. 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?
30
34. 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?
31
35. 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?
32
36. 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?
33
37. strategy Concrete
surface
What do we
skeleton
want to get out
of the site?
structure
What do our scope
users want?
strategy Abstract
34
38. Your
Your
User’s
Goals
Needs
Strategic Sweet Spot:
Where user needs and your goals meet. 35
39. Your
Your
User’s
Goals
Needs
Strategic Sweet Spot:
Where user needs and your goals meet. 35
85. skeleton Concrete
surface
What
skeleton
components will
enable people to
use the site? structure
scope
strategy Abstract
64
86. 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 65
115. 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
91
116. 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
91
117. 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
91
118. 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
91
119. 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
91
120. surface Concrete
surface
What will the
skeleton
finished product
look like?
structure
scope
strategy Abstract
92
126. “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
97
144. Functional Annotations
1
Login 2
user name
4 Links to Home on subsequent pages.
1
Logo branding space
password
Login Module. Submit either takes to secure
2
4
banking application or to a resubmit page if
Forgot my password
Begin Try Apply
there is an error.
Submit
Short description of our Teaser. Reasons to
Why bank?
products and services choose New Bank here.
Learn the basics about
here. Short description of Button links to account application page.
Compare us to other 3
banking. 5
our products and services brokers. Check out our Need help? Contact Us
here. More >> favorable rates and fees.
Why New Bank?
Links to Forgotten Password page.
etc.
Reasons to choose New 4
2 Today's Rates
Bank here. Compare us to
bullet point
other banks. Check out our Product 1 1
Links to Contact Us page.
Brief description of 5
bullet point
favorable rates and fees.
product here
bullet point
etc. More >>
bullet point
Demo
Product 2
3
Brief description of
Rate Table
product 2 here
More >>
Apply Now
Demo
Content Annotations
Copyr
1 3
Dynamic Rate Table.
Space
Products and services text can be modular, to
About New Bank - Customer Service - Pressroom 4
2
promo
be swapped in and out. Thumbnail graphics
can illustrate products.
Legal and Disclosure Notices - Privacy Policy - Customer Agreement
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod 3
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minimveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate Key Issues
velitesse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id Functional
1 None
estlaborum Reference
Content
1
Reference
Lorum ipsum
Static Text
Wireframes
Lorum ipsum
Linked Text
Lorum ipsum
Dynamic Text
Conditional
Include include
Interaction Designer: Dan Saffer
111
145. “Wireframing AJAX is a
[expletive]... We have
to determine all the
things a user might do,
and wireframe the
blessed moments of
each possibility.”
Jeffrey Zeldman, Web 3.0
112
147. Mouse Drag Over Drag Over
Hover Mouse Down Drag Initiated Valid Target Invalid Target
Cursor
CSS Move cursor Move cursor
CSS CSS Move cursor CSS Move cursor CSS Move cursor
Tool Tip
Drag Object
Full Opacity Reduced Opacity Reduced Opacity Reduced Opacity & Invalid Badge
Drop Target
Frame-by-Frames
No insertion bar, just a gap No insertion bar, just a gap Insertion bar showing where it will drop No insertion bar, just a gap
114
148. branding & navigation
Participant Interface Notes
register
Title: Register page
Date: 18 July 2005
All we really need is a unique name and email, everything after that is
Version: 1.0
gravy. Lorem ipsum dolor sit amet, nulla at fermentum nonummy
Functional Notes:
turpis mauris rutrum justo, nec. Cras malesuada, nulla at fermentum
The registration page allows users to signup for Participate simply by entering a user name and a valid email address. nonummy.
create a username:
a
alternate names
Provide the user with some notification of what the email a friend
1 a When user completes name entry and clicks to
action is worth in Participant points to encourage follow-through
enter your email:
email entry, compare the entered name to previously
and introduce non-registered users in the Incentive program.
b
claimed names on the site. If the name is a match, email error
generate alternates that can be clicked on to fill the
On click, commit the user's entered email addresses and
2 message, send to target addresses, and link user to a entry field.
confirmation page
hot posts 1
For users who have invited friends over email, provide reporting The name ryan_c is unavailable.
3 on # invited and # accepted. Hide actual names by default, but
How about: Instruction text lorem ipsum dolor sit amet, consectetuer adipiscing elit.
allow users to view them by clicking the quot;viewquot; link
ryan_c_01 archive >
Tuesday, July 19, 2005
iam_ryanc
written by: authorname tag: campaign
ryan_c_isme
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras malesuada,
nulla at fermentum nonummy, turpis mauris rutrum justo, nec molestie dolor
eros porttitor lorem. Proin pharetra wisi eu tortor. Vivamus cursus tortor id
User makes selection or inputs new name
purus. Suspendisse potenti. Ut dui. Vestibulum tincidunt.
that is valid & available:
comment on this post | more by this author | permalink
That name works. Thanks! 2
written by: authorname tag: film
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras malesuada,
nulla at fermentum nonummy, turpis mauris rutrum justo, nec molestie dolor
eros porttitor lorem. Proin pharetra wisi eu tortor. Vivamus cursus tortor id
purus. Suspendisse potenti. Ut dui. Vestibulum tincidunt.
b Is it possible to treat the quot;submitquot; button click as a
comment on this post | more by this author | permalink
call to validate the form of the user's entered email?
If there are any formating errors, alert the user and
Monday, July 18, 2005
prevent the page from loading the confirmation.
written by: authorname tag: campaign
The address you entered isn't
formatted properly. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras malesuada,
nulla at fermentum nonummy, turpis mauris rutrum justo, nec molestie dolor
eros porttitor lorem. Proin pharetra wisi eu tortor. Vivamus cursus tortor id
purus. Suspendisse potenti. Ut dui. Vestibulum tincidunt.
comment on this post | more by this author | permalink
archive >
3
Sign me up for the mailing list submit >
footer
Wireframes with Key Frames 106
107
115
149. branding & navigation
Participant Interface Notes
register
Title: Register page
Date: 18 July 2005
All we really need is a unique name and email, everything after that is
Version: 1.0
gravy. Lorem ipsum dolor sit amet, nulla at fermentum nonummy
Functional Notes:
turpis mauris rutrum justo, nec. Cras malesuada, nulla at fermentum
The registration page allows users to signup for Participate simply by entering a user name and a valid email address. nonummy.
create a username:
a
alternate names
Provide the user with some notification of what the email a friend
1 a When user completes name entry and clicks to
action is worth in Participant points to encourage follow-through
enter your email:
email entry, compare the entered name to previously
and introduce non-registered users in the Incentive program.
b
claimed names on the site. If the name is a match, email error
generate alternates that can be clicked on to fill the
On click, commit the user's entered email addresses and
2 message, send to target addresses, and link user to a entry field.
confirmation page
hot posts 1
For users who have invited friends over email, provide reporting The name ryan_c is unavailable.
3 on # invited and # accepted. Hide actual names by default, but
How about: Instruction text lorem ipsum dolor sit amet, consectetuer adipiscing elit.
allow users to view them by clicking the quot;viewquot; link
ryan_c_01 archive >
Tuesday, July 19, 2005
iam_ryanc
written by: authorname tag: campaign
ryan_c_isme
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras malesuada,
nulla at fermentum nonummy, turpis mauris rutrum justo, nec molestie dolor
eros porttitor lorem. Proin pharetra wisi eu tortor. Vivamus cursus tortor id
User makes selection or inputs new name
purus. Suspendisse potenti. Ut dui. Vestibulum tincidunt.
that is valid & available:
comment on this post | more by this author | permalink
That name works. Thanks! 2
written by: authorname tag: film
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras malesuada,
nulla at fermentum nonummy, turpis mauris rutrum justo, nec molestie dolor
eros porttitor lorem. Proin pharetra wisi eu tortor. Vivamus cursus tortor id
purus. Suspendisse potenti. Ut dui. Vestibulum tincidunt.
b Is it possible to treat the quot;submitquot; button click as a
comment on this post | more by this author | permalink
call to validate the form of the user's entered email?
If there are any formating errors, alert the user and
Monday, July 18, 2005
prevent the page from loading the confirmation.
written by: authorname tag: campaign
The address you entered isn't
formatted properly. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras malesuada,
nulla at fermentum nonummy, turpis mauris rutrum justo, nec molestie dolor
eros porttitor lorem. Proin pharetra wisi eu tortor. Vivamus cursus tortor id
purus. Suspendisse potenti. Ut dui. Vestibulum tincidunt.
comment on this post | more by this author | permalink
archive >
3
Sign me up for the mailing list submit >
footer
Wireframes with Key Frames 106
107
115
158. Hide me
Fill in:
Pickles X
| Add doesn’t work at this point,
so you either need to hide the
control or delete (x) the Pickles
Add
Lo-Fi Animations
168. 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/rwe2007.pdf Adaptive Path
david@adaptivepath.com
129
