Railsconf2007

746
-1

Published on

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
746
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Railsconf2007

  1. 1. Practical Design for Developers David Verba david@adaptivepath.com
  2. 2. 2
  3. 3. “We learn to describe the things we see, but we also see the things we can describe.” “Word Games” by David Womack, Print Magazine, October 2006. 3
  4. 4. This Session Includes: A survey of design principles. A framework for understanding design practice. Language for communicating clearly about design. Resources for further learning. 4
  5. 5. 5
  6. 6. is design the new black? 5
  7. 7. 6
  8. 8. visual interaction information service 6
  9. 9. A Successful Product Depends On: The experience your users have and how well your product serves their needs. 7
  10. 10. A Self-Assessment Tool for Teachers 8
  11. 11. The original desktop app: 9
  12. 12. option 1: literal translation 10
  13. 13. option 2 old style: use “best practices” and your own experience 11
  14. 14. A Teacher’s Day With children from 7:30am to 3:30pm. Often takes lunch with the children. Rarely has more than 5-10 minutes during the work day to do admin work. Might have a classroom computer. Do a lot of work on their home computers. 32 12
  15. 15. option 3 design interface to support context of use and actual tasks 13
  16. 16. option 3a use AJAX to improve interface responsiveness 14
  17. 17. needs superintendent To know how well schools are performing /| principals To know how well teachers are performing To manage many teachers /| teachers To know their privacy is protected 15
  18. 18. Know Who Your Users Are You must know and design for all of your users. 16
  19. 19. Understand Your Users know their... context motivations challenges 17
  20. 20. The Elements of User Experience by Jesse James Garrett 18
  21. 21. Concrete surface skeleton structure scope strategy Abstract 19
  22. 22. surface Concrete What will the finished product look like? surface skeleton What components will enable people to use the site? skeleton structure How will the pieces of the site fit structure together? scope scope What features will the site need to include? strategy strategy Abstract What do we want to get out of the site? What do our users want? 20
  23. 23. surface Concrete What will the finished product look like? surface skeleton What components will enable people to use the site? skeleton structure How will the pieces of the site fit structure together? scope scope What features will the site need to include? strategy strategy Abstract What do we want to get out of the site? What do our users want? 21
  24. 24. surface Concrete What will the finished product look like? surface skeleton What components will enable people to use the site? skeleton structure How will the pieces of the site fit structure together? scope scope What features will the site need to include? strategy strategy Abstract What do we want to get out of the site? What do our users want? 22
  25. 25. surface Concrete What will the finished product look like? surface skeleton What components will enable people to use the site? skeleton structure How will the pieces of the site fit structure together? scope scope What features will the site need to include? strategy strategy Abstract What do we want to get out of the site? What do our users want? 23
  26. 26. surface Concrete What will the finished product look like? surface skeleton What components will enable people to use the site? skeleton structure How will the pieces of the site fit structure together? scope scope What features will the site need to include? strategy strategy Abstract What do we want to get out of the site? What do our users want? 24
  27. 27. strategy Concrete surface What do we skeleton want to get out of the site? structure What do our scope users want? strategy Abstract 25
  28. 28. Your Your User’s Goals Needs Strategic Sweet Spot: Where user needs and your goals meet. 26
  29. 29. Your Your User’s Goals Needs Strategic Sweet Spot: Where user needs and your goals meet. 26
  30. 30. Know Your Stakeholders 27
  31. 31. Know Your Stakeholders A stakeholder is anyone who has an interest in the outcome of a project. 27
  32. 32. Site Objectives: what do you want to achieve? 28
  33. 33. Revenue Objectives Site Objectives: revenue objectives 29
  34. 34. Site Objectives: operational improvements 30
  35. 35. Your Users: identify all of them 31
  36. 36. Jesse white male age 25-40 city-dweller computer professional married, no children income >100K 32
  37. 37. Talk to your users 33
  38. 38. 34
  39. 39. Observing the User Experience by Mike Kuniavsky 35
  40. 40. scope Concrete surface What features skeleton will the site need to include? structure scope strategy Abstract 36
  41. 41. Functional Specifications What the site must include. 37
  42. 42. HIGH Snapfish Kodak Easyshare CVS LOW Uploading Storage Viewing Editing Sharing Printing 38
  43. 43. HIGH Snapfish Kodak Easyshare CVS Flickr LOW Uploading Storage Viewing Editing Sharing Printing 38
  44. 44. Don’t try to be everything to everybody. 39
  45. 45. select core features fulfill enrich feature set expand move into new areas Implementation Plan Make a promise to your users and deliver on it. 40
  46. 46. select core features fulfill enrich feature set expand move into new areas Implementation Plan Make a promise to your users and deliver on it. 40
  47. 47. select core features fulfill enrich feature set expand move into new areas Implementation Plan Make a promise to your users and deliver on it. 40
  48. 48. select core features fulfill enrich feature set expand move into new areas Implementation Plan Make a promise to your users and deliver on it. 40
  49. 49. Your App Ecosystem of Applications (you don’t have to be everything to everybody) 41
  50. 50. structure Concrete surface How will the skeleton pieces of the site fit together? structure scope strategy Abstract 42
  51. 51. Interaction Design How the user moves from one step in a process to the next. 43
  52. 52. Interaction Frameworks 44
  53. 53. Interaction Frameworks 44
  54. 54. Interaction Frameworks 45
  55. 55. pages Interaction Frameworks 45
  56. 56. Select label go! pop-ups pages Interaction Frameworks 45
  57. 57. Select label go! Select label go! layers pop-ups pages Interaction Frameworks 45
  58. 58. 58% 58% 58% 58% GO! Think Modularly 46
  59. 59. About Face 2.0: The Essentials of Interaction Design by Alan Cooper & Robert Reimann 47
  60. 60. Information Architecture How the user moves from one content element to the next. 48
  61. 61. Granularity 49
  62. 62. apple pear banana fruit Granularity 49
  63. 63. apple apple pear pear banana banana fruit fruit Granularity 49
  64. 64. apple apple fruit pear pear apple banana banana pear banana fruit fruit Granularity 49
  65. 65. Labeling 50
  66. 66. human resources Labeling 50
  67. 67. human resources employment opportunities Labeling 50
  68. 68. human resources employment opportunities jobs Labeling 50
  69. 69. Consistency 51
  70. 70. about us this company about who we are our company who are we? Consistency 51
  71. 71. Information Architecture for Large- Scale Web Sites by Louis Rosenfeld and Peter Morville 52
  72. 72. skeleton Concrete surface What skeleton components will enable people to use the site? structure scope strategy Abstract 53
  73. 73. Make finding things easy discoverability Actions should be recoverability without cost A sense of time, place, context and meaning How the system feedback responds Four Principles of Interaction Design 54
  74. 74. Discoverability Make finding things easy 55
  75. 75. from icq.com 56
  76. 76. from blogger.com 57
  77. 77. from yahoo.com 58
  78. 78. from oldnavy.com 59
  79. 79. from farecast.com 60
  80. 80. Recoverability Actions should be without cost 61
  81. 81. 62 from blogger.com
  82. 82. from travelocity.com 63
  83. 83. from farecast.com 64
  84. 84. from farecast.com 64
  85. 85. from farecast.com 64
  86. 86. from travelocity.com 65
  87. 87. from farecast.com 66
  88. 88. from google.com 67
  89. 89. from amazon.com 68
  90. 90. from Measure Map 69
  91. 91. Context A sense of time, place, and meaning 70
  92. 92. from amazon.com 71
  93. 93. from gap.com 72
  94. 94. from gap.com 73
  95. 95. from gap.com 74
  96. 96. from blogger.com 75
  97. 97. Feedback How the system responds 76
  98. 98. Provide Clear Error Messages for Users 77
  99. 99. Provide Clear Error Messages for Users 77
  100. 100. from basecamphq.com 78
  101. 101. from napyfab.com 79
  102. 102. The job requires extra pluck graphic The five boxing wizards jump front tab back tab back tab heading dropdown text field text field Pack my box $12.73 text field Back in June $56.47 The job requires extra pluck and zeal from every young graphic The job $128.75 wage earner. The five boxing wizards jump quickly. Six big Five boxing $19.21 heading juicy steaks sizzled in a pan as five workmen left the Six big steaks $44.19 quarry. Five wine experts jokingly quizzed sample chablis. • Pack my box with five label Total $991.31 dozen liquor jugs. • Back in June we button delivered oxygen heading button • The job requires extra pluck and zeal • The five boxing wizards dropdown document output cycle effective jump quickly. • Six big juicy steaks document 04/15/05 04/15/05 04/15/05 address graphic sizzled in a pan document 04/15/05 04/15/05 04/15/05 city Six big juicy steaks Pack my box with five document 04/15/05 04/15/05 04/15/05 sizzled in a pan as five state zip dozen liquor jugs. workmen left the quarry. document 04/15/05 04/15/05 04/15/05 Back in June we Five wine experts selected checkbox delivered oxygen jokingly quizzed sample document 04/15/05 04/15/05 04/15/05 equipment chablis. label selected list box item document 04/15/05 04/15/05 04/15/05 label highlighted item unselected front tab back tab unselected radio document 04/15/05 04/15/05 04/15/05 list box item selected radio document 04/15/05 04/15/05 04/15/05 list box item dropdown list box item unselected radio highlighted item dropdown list box item list box item label label dropdown dropdown collapsed button selected radio button selected radio button button selected checkbox unselected radio button button unselected radio button button Action at a Distance 80
  103. 103. The job requires extra pluck graphic The five boxing wizards jump front tab back tab back tab heading dropdown text field text field Pack my box $12.73 text field Back in June $56.47 The job requires extra pluck and zeal from every young graphic The job $128.75 wage earner. The five boxing wizards jump quickly. Six big Five boxing $19.21 heading juicy steaks sizzled in a pan as five workmen left the Six big steaks $44.19 quarry. Five wine experts jokingly quizzed sample chablis. • Pack my box with five label Total $991.31 dozen liquor jugs. • Back in June we button delivered oxygen heading button • The job requires extra pluck and zeal • The five boxing wizards dropdown document output cycle effective jump quickly. • Six big juicy steaks document 04/15/05 04/15/05 04/15/05 address graphic sizzled in a pan document 04/15/05 04/15/05 04/15/05 city Six big juicy steaks Pack my box with five document 04/15/05 04/15/05 04/15/05 sizzled in a pan as five state zip dozen liquor jugs. workmen left the quarry. document 04/15/05 04/15/05 04/15/05 Back in June we Five wine experts selected checkbox delivered oxygen jokingly quizzed sample document 04/15/05 04/15/05 04/15/05 equipment chablis. label selected list box item document 04/15/05 04/15/05 04/15/05 label highlighted item unselected front tab back tab unselected radio document 04/15/05 04/15/05 04/15/05 list box item selected radio document 04/15/05 04/15/05 04/15/05 list box item dropdown list box item unselected radio highlighted item dropdown list box item list box item label label dropdown dropdown collapsed button selected radio button selected radio button button selected checkbox unselected radio button button unselected radio button button Action at a Distance 80
  104. 104. The job requires extra pluck graphic The five boxing wizards jump front tab back tab back tab heading dropdown text field text field Pack my box $12.73 text field Back in June $56.47 The job requires extra pluck and zeal from every young graphic The job $128.75 wage earner. The five boxing wizards jump quickly. Six big Five boxing $19.21 heading juicy steaks sizzled in a pan as five workmen left the Six big steaks $44.19 quarry. Five wine experts jokingly quizzed sample chablis. • Pack my box with five label Total $991.31 dozen liquor jugs. • Back in June we button delivered oxygen heading button • The job requires extra pluck and zeal • The five boxing wizards dropdown document output cycle effective jump quickly. • Six big juicy steaks document 04/15/05 04/15/05 04/15/05 address graphic sizzled in a pan document 04/15/05 04/15/05 04/15/05 city Six big juicy steaks Pack my box with five document 04/15/05 04/15/05 04/15/05 sizzled in a pan as five state zip dozen liquor jugs. workmen left the quarry. document 04/15/05 04/15/05 04/15/05 Back in June we Five wine experts selected checkbox delivered oxygen jokingly quizzed sample document 04/15/05 04/15/05 04/15/05 equipment chablis. label selected list box item document 04/15/05 04/15/05 04/15/05 label highlighted item unselected front tab back tab unselected radio document 04/15/05 04/15/05 04/15/05 list box item selected radio document 04/15/05 04/15/05 04/15/05 list box item dropdown list box item unselected radio highlighted item dropdown list box item list box item label label dropdown dropdown collapsed button selected radio button selected radio button button selected checkbox unselected radio button button unselected radio button button Action at a Distance 80
  105. 105. The job requires extra pluck graphic The five boxing wizards jump front tab back tab back tab heading dropdown text field text field Pack my box $12.73 text field Back in June $56.47 The job requires extra pluck and zeal from every young graphic The job $128.75 wage earner. The five boxing wizards jump quickly. Six big Five boxing $19.21 heading juicy steaks sizzled in a pan as five workmen left the Six big steaks $44.19 quarry. Five wine experts jokingly quizzed sample chablis. • Pack my box with five label Total $991.31 dozen liquor jugs. • Back in June we button delivered oxygen heading button • The job requires extra pluck and zeal • The five boxing wizards dropdown document output cycle effective jump quickly. • Six big juicy steaks document 04/15/05 04/15/05 04/15/05 address graphic sizzled in a pan document 04/15/05 04/15/05 04/15/05 city Six big juicy steaks Pack my box with five document 04/15/05 04/15/05 04/15/05 sizzled in a pan as five state zip dozen liquor jugs. workmen left the quarry. document 04/15/05 04/15/05 04/15/05 Back in June we Five wine experts selected checkbox delivered oxygen jokingly quizzed sample document 04/15/05 04/15/05 04/15/05 equipment chablis. label selected list box item document 04/15/05 04/15/05 04/15/05 label highlighted item unselected front tab back tab unselected radio document 04/15/05 04/15/05 04/15/05 list box item selected radio document 04/15/05 04/15/05 04/15/05 list box item dropdown list box item unselected radio highlighted item dropdown list box item list box item label label dropdown dropdown collapsed button selected radio button selected radio button button selected checkbox unselected radio button button unselected radio button button Action at a Distance 80
  106. 106. The job requires extra pluck graphic The five boxing wizards jump front tab back tab back tab heading dropdown text field text field Pack my box $12.73 text field Back in June $56.47 The job requires extra pluck and zeal from every young graphic The job $128.75 wage earner. The five boxing wizards jump quickly. Six big Five boxing $19.21 heading juicy steaks sizzled in a pan as five workmen left the Six big steaks $44.19 quarry. Five wine experts jokingly quizzed sample chablis. • Pack my box with five label Total $991.31 dozen liquor jugs. • Back in June we button delivered oxygen heading button • The job requires extra pluck and zeal • The five boxing wizards dropdown document output cycle effective jump quickly. • Six big juicy steaks document 04/15/05 04/15/05 04/15/05 address graphic sizzled in a pan document 04/15/05 04/15/05 04/15/05 city Six big juicy steaks Pack my box with five document 04/15/05 04/15/05 04/15/05 sizzled in a pan as five state zip dozen liquor jugs. workmen left the quarry. document 04/15/05 04/15/05 04/15/05 Back in June we Five wine experts selected checkbox delivered oxygen jokingly quizzed sample document 04/15/05 04/15/05 04/15/05 equipment chablis. label selected list box item document 04/15/05 04/15/05 04/15/05 label highlighted item unselected front tab back tab unselected radio document 04/15/05 04/15/05 04/15/05 list box item selected radio document 04/15/05 04/15/05 04/15/05 list box item dropdown list box item unselected radio highlighted item dropdown list box item list box item label label dropdown dropdown collapsed button selected radio button selected radio button button selected checkbox unselected radio button button unselected radio button button Action at a Distance 80
  107. 107. Make finding things easy discoverability Actions should be recoverability without cost A sense of time, place, context and meaning How the system feedback responds Four Principles of Interaction Design 81
  108. 108. surface Concrete surface What will the skeleton finished product look like? structure scope strategy Abstract 82
  109. 109. Design is not just cosmetic. 83
  110. 110. also Design is not just cosmetic. 83
  111. 111. The Attractiveness Bias* ruthlessly stolen from “Universal Principles of Design” by Lidwell, Holden, and Butler 84
  112. 112. 85
  113. 113. 86
  114. 114. “Even if a website is highly usable and provides very useful information presented in a logical arrangement, it may fail to impress a user whose first impression of the site was negative.” Dr. Gitte Lindgaard, Carleton University 108 87
  115. 115. who do you trust? 88
  116. 116. Personality 89
  117. 117. what do each of these say to you? 90
  118. 118. Visual Design 91
  119. 119. The Non- Designer’s Design Book by Robin Williams 92 23
  120. 120. CRAP c contrast r repetition a alignment p proximity 93
  121. 121. CRAP c contrast r repetition a alignment p proximity 93
  122. 122. CRAP c contrast r repetition a alignment p proximity 93
  123. 123. CRAP c contrast r repetition a alignment p proximity 93
  124. 124. CRAP c contrast r repetition a alignment p proximity 93
  125. 125. contrast RailsConf 2007 repetition Portland, OR alignment May 17-20, 2007 proximity 94
  126. 126. contrast repetition RailsConf 2007 May 17 - 20, 2007 | Portland, OR alignment proximity 95
  127. 127. Visual Design Even simple improvements make a huge difference. 96
  128. 128. Resources The Non-Designer’s Design Book by Robin Williams About Face 2.0: The Essentials of Interaction Design by Alan Cooper Information Architecture for the World Wide Web by Louis Rosenfeld and Peter Morville Observing the User Experience by Mike Kuniavsky The Elements of User Experience by Jesse James Garrett David Verba | Dir. of Technology http://www.adaptivepath.com/slides/railsconf2007.pdf Adaptive Path david@adaptivepath.com 97

×