Practical Design for Ajax
Development
David Verba
david@adaptivepath.com

2

2

“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

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

5

is design
the new black?
5

6

visual
interaction
information
service
6

A Successful Product
Depends On:
The experience your users have and
how well your product serves their needs.
7

8

What about this one?
9

Or this one?
10

Prioritizing Users
“traditional” bench “anti-homeless” bench
Citizens Police
Police City
priority
City Citizens
Homeless Homeless

What makes a bench
successful?
12

City’s Perspective
Discourages homelessness
“Good” citizens use them
Reduced loitering, drug dealing, and petty crime
13

Citizens’ Perspective
Cleaner
Welcoming
A pleasant place to spend some time
14

Are these benches
successful?
15

Is there
another path?
Sean Godsell’s Park Bench House
16

Know Who Your Users Are
You must know and design
for all of your users.
17

A Self-Assessment Tool for
Teachers 18

The original desktop app:
19

option 1: literal translation
20

option 2
old style: use “best
practices” and your
own experience
21

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

option 3
design interface to
support context of
use and actual tasks
23

option 3a
use AJAX to
improve interface
responsiveness
24

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

Understand Your Users
know their...
context
motivations
challenges
26

The
Elements of
User
Experience
by Jesse James
Garrett
27

Concrete
surface
skeleton
structure
scope
strategy Abstract
28

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

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

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

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

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

strategy Concrete
surface
What do we
skeleton
want to get out
of the site?
structure
What do our scope
users want?
strategy Abstract
34

Your
Your
User’s
Goals
Needs
Strategic Sweet Spot:
Where user needs and your goals meet. 35

Your
Your
User’s
Goals
Needs
Strategic Sweet Spot:
Where user needs and your goals meet. 35

Know Your Stakeholders
36

Know Your Stakeholders
A stakeholder is anyone who has an
interest in the outcome of a project.
36

Site Objectives:
what do you want to achieve?
37

Revenue
Objectives
Site Objectives:
revenue objectives 38

Site Objectives:
operational improvements 39

Your Users:
identify all of them 40

Jesse
white male
age 25-40
city-dweller
computer professional
married, no children
income >100K
41

Talk to your users
42

43

Observing
the User
Experience
by Mike
Kuniavsky
44

Evolving Strategy
45

Evolving Strategy
45

HIGH Snapfish
Kodak
Easyshare
CVS
LOW
Uploading Storage Viewing Editing Sharing Printing
46

HIGH Snapfish
Kodak
Easyshare
CVS
Flickr
LOW
Uploading Storage Viewing Editing Sharing Printing
46

scope Concrete
surface
What features
skeleton
will the site need
to include?
structure
scope
strategy Abstract
47

HIGH Snapfish
Kodak
Easyshare
CVS
Flickr
LOW
Uploading Storage Viewing Editing Sharing Printing
48

Functional Specifications
What the site must include. 49

Don’t try to be
everything to
everybody.
50

select core features
fulfill enrich feature set
expand move into new areas
Implementation Plan
Make a promise to your users and deliver on it. 51

select core features
fulfill enrich feature set
expand move into new areas
Implementation Plan
Make a promise to your users and deliver on it. 51

select core features
fulfill enrich feature set
expand move into new areas
Implementation Plan
Make a promise to your users and deliver on it. 51

select core features
fulfill enrich feature set
expand move into new areas
Implementation Plan
Make a promise to your users and deliver on it. 51

Your App
Ecosystem of Applications
(you don’t have to be everything to everybody) 52

structure Concrete
surface
How will the
skeleton
pieces of the site
fit together?
structure
scope
strategy Abstract
53

Interaction
Design
How the user
moves from one
step in a process
to the next.
54

Interaction Frameworks
55

Interaction Frameworks
55

Interaction Frameworks
56

pages
Interaction Frameworks
56

Select
label
go!
pop-ups
pages
Interaction Frameworks
56

Select
label
go!
Select
label
go!
layers
pop-ups
pages
Interaction Frameworks
56

58%
58% 58%
58%
GO!
Think Modularly
57

About Face
2.0: The
Essentials of
Interaction
Design
by Alan Cooper &
Robert Reimann
58

Information
Architecture
How the user
moves from one
content element
to the next.
59

Granularity
60

apple
pear
banana
fruit
Granularity
60

apple apple
pear pear
banana banana
fruit
fruit
Granularity
60

apple apple fruit
pear pear apple
banana banana pear
banana
fruit
fruit
Granularity
60

Labeling
61

human resources
Labeling
61

human resources
employment opportunities
Labeling
61

human resources
employment opportunities
jobs
Labeling
61

Consistency
62

about us this company
about who we are
our company who are we?
Consistency
62

Information
Architecture
for Large-
Scale Web
Sites
by Louis
Rosenfeld and
Peter Morville
63

skeleton Concrete
surface
What
skeleton
components will
enable people to
use the site? structure
scope
strategy Abstract
64

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

Discoverability
Make finding things easy 66

from icq.com 67

from .com 68

from yahoo.com 69

from oldnavy.com 70

from farecast.com 71

Recoverability
Actions should be without cost 72

73
from blogger.com

from travelocity.com 74

from farecast.com 75

from farecast.com 75

from farecast.com 75

from travelocity.com 76

from farecast.com 77

from google.com 78

from amazon.com 79

from Measure Map 80

Context
A sense of time, place, and meaning 81

from amazon.com 82

from gap.com 83

from gap.com 84

from gap.com 85

from blogger.com
86

Feedback
How the system responds 87

Provide Clear Error Messages for Users
88

Provide Clear Error Messages for Users
88

from basecamphq.com 89

from napyfab.com 90

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

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

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

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

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

surface Concrete
surface
What will the
skeleton
finished product
look like?
structure
scope
strategy Abstract
92

Design is not just cosmetic.
93

also
Design is not just cosmetic.
93

The Attractiveness Bias*
ruthlessly stolen from “Universal Principles of Design” by Lidwell, Holden, and Butler
94

95

96

“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

who do you trust? 98

Personality
99

what do each of these say to you? 100

Visual Design
101

The Non-
Designer’s
Design Book
by Robin
Williams
102
23

CRAP
c contrast
r repetition
a alignment
p proximity
103

CRAP
c contrast
r repetition
a alignment
p proximity
103

CRAP
c contrast
r repetition
a alignment
p proximity
103

CRAP
c contrast
r repetition
a alignment
p proximity
103

CRAP
c contrast
r repetition
a alignment
p proximity
103

contrast
Rich Web Experience
repetition San Jose, CA
alignment September 6-8, 2007
www.therichwebexperience.com
proximity
104

contrast
Rich Web Experience
repetition San Jose, CA
alignment September 6-8, 2007
www.therichwebexperience.com
proximity
105

contrast
Rich Web Experience
repetition September 6-8, 2007 | San Jose, CA
alignment
www.therichwebexperience.com
proximity
106
97

contrast
repetition
Rich Web Experience
September 6-8, 2007 | San Jose, CA
alignment www.therichwebexperience.com
proximity
107

contrast
repetition
Rich Web Experience
September 6-8, 2007 | San Jose, CA
alignment www.therichwebexperience.com
proximity
108

Visual Design
Even simple improvements
make a huge difference.
109

Documentation
110

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

“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

Storyboards 113

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

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 \"view\" 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 \"submit\" 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

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 \"view\" 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 \"submit\" 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

Wireframes with Key Frames
116

Show me
Lo-Fi Animations

Hide me
Fill in:
|
Add
Lo-Fi Animations

Hide me
Fill in:
Pickles|
Add
Lo-Fi Animations

Hide me
Fill in:
Pickles|
Add
Lo-Fi Animations

Hide me
Fill in:
Pickles|
Add
Lo-Fi Animations

Hide me
Fill in:
Pickles X
|
Add
Lo-Fi Animations

Hide me
Fill in:
Pickles X
|
Add
Lo-Fi Animations

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

simple html/css/javascript
+ xml/json
Prototypes 123

simple html/css/javascript
+ xml/json
Prototypes 123

Prototypes 124

simple html/css/javascript
+ xml/json
Prototypes 125

simple html/css/javascript
+ xml/json
Prototypes 125

Prototypes 126

simple html/css/javascript
+ xml/json
functional backend
Prototypes 127

simple html/css/javascript
+ xml/json
functional backend
Prototypes 127

the metric is
communication
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/rwe2007.pdf Adaptive Path
david@adaptivepath.com
129