Design for Ajax Developers

Transcription

1 Design for Ajax Developers David Verba

2 2

3 2

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

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

6 5

7 is design the new black? 5

8 6

9 visual interaction information service 6

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

11 8

12 What about this one? 9

13 Or this one? 10

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

15 What makes a bench successful? 12

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

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

18 Are these benches successful? 15

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

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

21 A Self-Assessment Tool for Teachers 18

22 The original desktop app: 19

23 option 1: literal translation 20

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

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

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

27 option 3a use AJAX to improve interface responsiveness 24

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

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

30 The Elements of User Experience by Jesse James Garrett 27

31 Concrete s u r f a c e s k e l e t o n s t r u c t u r e s c o p e s t r a t e g y Abstract 28

32 s u r f a c e s k e l e t o n s t r u c t u r e s c o p e s t r a t e g y Concrete Abstract surface What will the finished product look like? skeleton What components will enable people to use the site? structure How will the pieces of the site fit together? scope What features will the site need to include? strategy What do we want to get out of the site? What do our users want? 29

33 s u r f a c e s k e l e t o n s t r u c t u r e s c o p e s t r a t e g y Concrete Abstract surface What will the finished product look like? skeleton What components will enable people to use the site? structure How will the pieces of the site fit together? scope What features will the site need to include? strategy What do we want to get out of the site? What do our users want? 30

34 s u r f a c e s k e l e t o n s t r u c t u r e s c o p e s t r a t e g y Concrete Abstract surface What will the finished product look like? skeleton What components will enable people to use the site? structure How will the pieces of the site fit together? scope What features will the site need to include? strategy What do we want to get out of the site? What do our users want? 31

35 s u r f a c e s k e l e t o n s t r u c t u r e s c o p e s t r a t e g y Concrete Abstract surface What will the finished product look like? skeleton What components will enable people to use the site? structure How will the pieces of the site fit together? scope What features will the site need to include? strategy What do we want to get out of the site? What do our users want? 32

36 s u r f a c e s k e l e t o n s t r u c t u r e s c o p e s t r a t e g y Concrete Abstract surface What will the finished product look like? skeleton What components will enable people to use the site? structure How will the pieces of the site fit together? scope What features will the site need to include? strategy What do we want to get out of the site? What do our users want? 33

37 strategy Concrete s u r f a c e What do we want to get out of the site? What do our users want? s k e l e t o n s t r u c t u r e s c o p e s t r a t e g y Abstract 34

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

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

40 Know Your Stakeholders 36

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

42 Site Objectives: what do you want to achieve? 37

43 Revenue Objectives Site Objectives: revenue objectives 38

44 Site Objectives: operational improvements 39

45 Your Users: identify all of them 40

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

47 Talk to your users 42

48 43

49 Observing the User Experience by Mike Kuniavsky 44

50 Evolving Strategy 45

51 Evolving Strategy 45

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

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

54 scope Concrete s u r f a c e What features will the site need to include? s k e l e t o n s t r u c t u r e s c o p e s t r a t e g y Abstract 47

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

56 Functional Specifications What the site must include. 49

57 Don t try to be everything to everybody. 50

58 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

59 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

60 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

61 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

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

63 structure Concrete s u r f a c e How will the pieces of the site fit together? s k e l e t o n s t r u c t u r e s c o p e s t r a t e g y Abstract 53

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

65 Interaction Frameworks 55

66 Interaction Frameworks 55

67 pages Interaction Frameworks 56

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

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

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

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

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

73 Granularity 60

74 apple pear banana fruit Granularity 60

75 apple pear banana fruit apple pear banana fruit Granularity 60

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

77 Labeling 61

78 human resources Labeling 61

79 human resources employment opportunities Labeling 61

80 human resources employment opportunities jobs Labeling 61

81 Consistency 62

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

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

84 skeleton Concrete s u r f a c e What components will enable people to use the site? s k e l e t o n s t r u c t u r e s c o p e s t r a t e g y Abstract 64

85 discoverability recoverability context feedback Make finding things easy Actions should be without cost A sense of time, place, and meaning How the system responds Four Principles of Interaction Design 65

86 Discoverability Make finding things easy 66

87 from icq.com 67

88 from.com 68

89 from yahoo.com 69

90 from oldnavy.com 70

91 from farecast.com 71

92 Recoverability Actions should be without cost 72

93 from blogger.com 73

94 from travelocity.com 74

95 from farecast.com 75

96 from farecast.com 75

97 from farecast.com 75

98 from travelocity.com 76

99 from farecast.com 77

100 from google.com 78

101 from amazon.com 79

102 from Measure Map 80

103 Context A sense of time, place, and meaning 81

104 from amazon.com 82

105 from gap.com 83

106 from gap.com 84

107 from gap.com 85

108 from netflix.com 86

109 87 from blogger.com

110 Feedback How the system responds 88

111 Provide Clear Error Messages for Users 89

112 Provide Clear Error Messages for Users 89

113 from basecamphq.com 90

114 from napyfab.com 91

115 graphic The job requires extra pluck The five boxing wizards jump dropdown text field heading Pack my box with five dozen liquor jugs. Back in June we delivered oxygen The job requires extra pluck and zeal The five boxing wizards jump quickly. Six big juicy steaks sizzled in a pan Six big juicy steaks sizzled in a pan as five workmen left the quarry. Five wine experts jokingly quizzed sample chablis. label unselected radio selected radio unselected radio dropdown dropdown button front tab back tab back tab heading dropdown address city state graphic label selected checkbox list box item highlighted item list box item list box item dropdown collapsed selected checkbox text field zip label text field The job requires extra pluck and zeal from every young wage earner. The five boxing wizards jump quickly. Six big juicy steaks sizzled in a pan as five workmen left the quarry. Five wine experts jokingly quizzed sample chablis. selected unselected dropdown selected radio button unselected radio button button button label button document output cycle effective document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 selected radio button unselected radio button heading Pack my box Back in June The job Five boxing Six big steaks graphic $12.73 $56.47 $ $19.21 $44.19 Total $ button Pack my box with five dozen liquor jugs. Back in June we delivered oxygen equipment label front tab back tab list box item highlighted item list box item list box item button Action at a Distance 92

116 graphic The job requires extra pluck The five boxing wizards jump dropdown text field heading Pack my box with five dozen liquor jugs. Back in June we delivered oxygen The job requires extra pluck and zeal The five boxing wizards jump quickly. Six big juicy steaks sizzled in a pan Six big juicy steaks sizzled in a pan as five workmen left the quarry. Five wine experts jokingly quizzed sample chablis. label unselected radio selected radio unselected radio dropdown dropdown button front tab back tab back tab heading dropdown address city state graphic label selected checkbox list box item highlighted item list box item list box item dropdown collapsed selected checkbox text field zip label text field The job requires extra pluck and zeal from every young wage earner. The five boxing wizards jump quickly. Six big juicy steaks sizzled in a pan as five workmen left the quarry. Five wine experts jokingly quizzed sample chablis. selected unselected dropdown selected radio button unselected radio button button button label button document output cycle effective document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 selected radio button unselected radio button heading Pack my box Back in June The job Five boxing Six big steaks graphic $12.73 $56.47 $ $19.21 $44.19 Total $ button Pack my box with five dozen liquor jugs. Back in June we delivered oxygen equipment label front tab back tab list box item highlighted item list box item list box item button Action at a Distance 92

117 graphic The job requires extra pluck The five boxing wizards jump dropdown text field heading Pack my box with five dozen liquor jugs. Back in June we delivered oxygen The job requires extra pluck and zeal The five boxing wizards jump quickly. Six big juicy steaks sizzled in a pan Six big juicy steaks sizzled in a pan as five workmen left the quarry. Five wine experts jokingly quizzed sample chablis. label unselected radio selected radio unselected radio dropdown dropdown button front tab back tab back tab heading dropdown address city state graphic label selected checkbox list box item highlighted item list box item list box item dropdown collapsed selected checkbox text field zip label text field The job requires extra pluck and zeal from every young wage earner. The five boxing wizards jump quickly. Six big juicy steaks sizzled in a pan as five workmen left the quarry. Five wine experts jokingly quizzed sample chablis. selected unselected dropdown selected radio button unselected radio button button button label button document output cycle effective document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 selected radio button unselected radio button heading Pack my box Back in June The job Five boxing Six big steaks graphic $12.73 $56.47 $ $19.21 $44.19 Total $ button Pack my box with five dozen liquor jugs. Back in June we delivered oxygen equipment label front tab back tab list box item highlighted item list box item list box item button Action at a Distance 92

118 graphic The job requires extra pluck The five boxing wizards jump dropdown text field heading Pack my box with five dozen liquor jugs. Back in June we delivered oxygen The job requires extra pluck and zeal The five boxing wizards jump quickly. Six big juicy steaks sizzled in a pan Six big juicy steaks sizzled in a pan as five workmen left the quarry. Five wine experts jokingly quizzed sample chablis. label unselected radio selected radio unselected radio dropdown dropdown button front tab back tab back tab heading dropdown address city state graphic label selected checkbox list box item highlighted item list box item list box item dropdown collapsed selected checkbox text field zip label text field The job requires extra pluck and zeal from every young wage earner. The five boxing wizards jump quickly. Six big juicy steaks sizzled in a pan as five workmen left the quarry. Five wine experts jokingly quizzed sample chablis. selected unselected dropdown selected radio button unselected radio button button button label button document output cycle effective document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 selected radio button unselected radio button heading Pack my box Back in June The job Five boxing Six big steaks graphic $12.73 $56.47 $ $19.21 $44.19 Total $ button Pack my box with five dozen liquor jugs. Back in June we delivered oxygen equipment label front tab back tab list box item highlighted item list box item list box item button Action at a Distance 92

119 graphic The job requires extra pluck The five boxing wizards jump dropdown text field heading Pack my box with five dozen liquor jugs. Back in June we delivered oxygen The job requires extra pluck and zeal The five boxing wizards jump quickly. Six big juicy steaks sizzled in a pan Six big juicy steaks sizzled in a pan as five workmen left the quarry. Five wine experts jokingly quizzed sample chablis. label unselected radio selected radio unselected radio dropdown dropdown button front tab back tab back tab heading dropdown address city state graphic label selected checkbox list box item highlighted item list box item list box item dropdown collapsed selected checkbox text field zip label text field The job requires extra pluck and zeal from every young wage earner. The five boxing wizards jump quickly. Six big juicy steaks sizzled in a pan as five workmen left the quarry. Five wine experts jokingly quizzed sample chablis. selected unselected dropdown selected radio button unselected radio button button button label button document output cycle effective document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 document 04/15/05 04/15/05 04/15/05 selected radio button unselected radio button heading Pack my box Back in June The job Five boxing Six big steaks graphic $12.73 $56.47 $ $19.21 $44.19 Total $ button Pack my box with five dozen liquor jugs. Back in June we delivered oxygen equipment label front tab back tab list box item highlighted item list box item list box item button Action at a Distance 92

120 surface Concrete s u r f a c e What will the finished product look like? s k e l e t o n s t r u c t u r e s c o p e s t r a t e g y Abstract 93

121 Design is not just cosmetic. 94

122 also Design is not just cosmetic. 94

123 The Attractiveness Bias* ruthlessly stolen from Universal Principles of Design by Lidwell, Holden, and Butler 95

124 96

125 97

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

127 who do you trust? 99

128 Personality 100

129 what do each of these say to you? 101

130 Visual Design 102

131 The Non- Designer s Design Book by Robin Williams

132 CRAP c r a p contrast repetition alignment proximity 104

133 CRAP c r a p contrast repetition alignment proximity 104

134 CRAP c r a p contrast repetition alignment proximity 104

135 CRAP c r a p contrast repetition alignment proximity 104

136 CRAP c r a p contrast repetition alignment proximity 104

137 contrast repetition alignment proximity The AJAX Experience Boston, MA October 23-26,

138 contrast repetition The AJAX Experience Boston, MA alignment October 23-26, proximity 106

139 contrast repetition The AJAX Experience October 23-26, 2007 Boston, MA alignment proximity

140 contrast repetition alignment The AJAX Experience October 23-26, 2007 Boston, MA proximity 108

141 contrast repetition alignment The AJAX Experience October 23-26, 2007 Boston, MA proximity 109

142 Visual Design Even simple improvements make a huge difference. 110

143 Documentation 111

144 Functional Annotations Logo 1 branding space 4 Login user name 2 1 Links to Home on subsequent pages. Begin Why bank? Learn the basics about banking. Why New Bank? Reasons to choose New Bank here. Compare us to other banks. Check out our favorable rates and fees. etc. Try Short description of our products and services here. Short description of our products and services here. More >> Product 1 Brief description of product here More >> 2 Demo Apply Teaser. Reasons to choose New Bank here. Compare us to other brokers. Check out our favorable rates and fees. etc. bullet point bullet point bullet point bullet point password 4 Forgot my password Submit 5 Need help? Contact Us Today's Rates Login Module. Submit either takes to secure banking application or to a resubmit page if there is an error. Button links to account application page. Links to Forgotten Password page. 5 Links to Contact Us page. Product 2 Brief description of product 2 here More >> Demo Apply Now 3 Rate Table Content Annotations 1 Dynamic Rate Table. 3 Copyr About New Bank - Customer Service - Pressroom Legal and Disclosure Notices - Privacy Policy - Customer Agreement 2 Products and services text can be modular, to be swapped in and out. Thumbnail graphics can illustrate products. 4 Space promo Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod 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 velitesse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id estlaborum 3 Key Functional Reference Content Reference 1 1 Issues None Static Text Lorum ipsum Interaction Designer: Dan Saffer Wireframes Linked Text Dynamic Text Conditional Include Lorum ipsum Lorum ipsum include 112

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

146 Storyboards 114

147 Mouse Hover Mouse Down Drag Initiated Drag Over Valid Target Drag Over Invalid Target Cursor CSS Move cursor CSS Move cursor 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 115

148 branding & navigation Participant Interface Notes Title: Register page Date: 18 July 2005 Version: 1.0 Functional Notes: The registration page allows users to signup for Participate simply by entering a user name and a valid address. register All we really need is a unique name and , everything after that is gravy. Lorem ipsum dolor sit amet, nulla at fermentum nonummy turpis mauris rutrum justo, nec. Cras malesuada, nulla at fermentum nonummy. create a username: alternate names a Provide the user with some notification of what the a friend action is worth in Participant points to encourage follow-through and introduce non-registered users in the Incentive program. On click, commit the user's entered addresses and message, send to target addresses, and link user to a confirmation page For users who have invited friends over , provide reporting on # invited and # accepted. Hide actual names by default, but allow users to view them by clicking the "view" link a When user completes name entry and clicks to entry, compare the entered name to previously claimed names on the site. If the name is a match, generate alternates that can be clicked on to fill the entry field. The name ryan_c is unavailable. How about: ryan_c_01 iam_ryanc ryan_c_isme User makes selection or inputs new name that is valid & available: That name works. Thanks! b Is it possible to treat the "submit" button click as a call to validate the form of the user's entered ? If there are any formating errors, alert the user and prevent the page from loading the confirmation. The address you entered isn't formatted properly. enter your hot posts 1 error Instruction text lorem ipsum dolor sit amet, consectetuer adipiscing elit. archive > Tuesday, July 19, 2005 written by: authorname 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. 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 Monday, July 18, 2005 written by: authorname tag: campaign comment on this post more by this author permalink 2 written by: authorname tag: film tag: campaign 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 comment on this post more by this author permalink 3 Sign me up for the mailing list submit > archive > footer Wireframes with Key Frames

149 branding & navigation Participant Interface Notes Title: Register page Date: 18 July 2005 Version: 1.0 Functional Notes: The registration page allows users to signup for Participate simply by entering a user name and a valid address. register All we really need is a unique name and , everything after that is gravy. Lorem ipsum dolor sit amet, nulla at fermentum nonummy turpis mauris rutrum justo, nec. Cras malesuada, nulla at fermentum nonummy. create a username: alternate names a Provide the user with some notification of what the a friend action is worth in Participant points to encourage follow-through and introduce non-registered users in the Incentive program. On click, commit the user's entered addresses and message, send to target addresses, and link user to a confirmation page For users who have invited friends over , provide reporting on # invited and # accepted. Hide actual names by default, but allow users to view them by clicking the "view" link a When user completes name entry and clicks to entry, compare the entered name to previously claimed names on the site. If the name is a match, generate alternates that can be clicked on to fill the entry field. The name ryan_c is unavailable. How about: ryan_c_01 iam_ryanc ryan_c_isme User makes selection or inputs new name that is valid & available: That name works. Thanks! b Is it possible to treat the "submit" button click as a call to validate the form of the user's entered ? If there are any formating errors, alert the user and prevent the page from loading the confirmation. The address you entered isn't formatted properly. enter your hot posts 1 error Instruction text lorem ipsum dolor sit amet, consectetuer adipiscing elit. archive > Tuesday, July 19, 2005 written by: authorname 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. 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 Monday, July 18, 2005 written by: authorname tag: campaign comment on this post more by this author permalink 2 written by: authorname tag: film tag: campaign 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 comment on this post more by this author permalink 3 Sign me up for the mailing list submit > archive > footer Wireframes with Key Frames

150 Wireframes with Key Frames117

151 simple html/css/javascript + xml/json Prototypes 118

152 simple html/css/javascript + xml/json Prototypes 118

153 Prototypes 119

154 from protoscript.com 120

155 simple html/css/javascript + xml/json Prototypes 121

156 simple html/css/javascript + xml/json Prototypes 121

157 Prototypes 122

158 simple html/css/javascript + xml/json functional backend Prototypes 123

159 simple html/css/javascript + xml/json functional backend Prototypes 123

160 the metric is communication 124

161 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 Technical Advisor Adaptive Path david@adaptivepath.com 125