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

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

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