Fastdev 1

705 views

Published on

Usability for

  • Be the first to comment

  • Be the first to like this

Fastdev 1

  1. 1. Usability и.т.д.FastDev • 02–02–11
  2. 2. Jonas Söderström
  3. 3. 1977 – Jonas Söderström
  4. 4. 1977 –1994 – Jonas Söderström
  5. 5. ”User friendly”
  6. 6. ”User friendly”
  7. 7. Usable
  8. 8. Usability is ... ?
  9. 9. Easy to use - how? Easy to remember
  10. 10. Easy to use - how? Easy to remember
  11. 11. Easy to use - how? Easy to learn Easy to remember
  12. 12. Easy to use - how? Easy to learn Efficient Easy to remember
  13. 13. Easy to use - how? Easy to learn Efficient Easy to Error remember reduction
  14. 14. Easy to use - how? Easy to learn User’s subjective Efficientsatisfaction Easy to Error remember reduction
  15. 15. Usable• Do I find the stuff I need?• Do I understand what the buttons do?• Is navigation consistent?• Does the system provide clear feedback on what I do?• Are error messages helpful?
  16. 16. Usability =Could I use it?
  17. 17. Useful =Would I use it?
  18. 18. Useful-ness• Do I really need it?• Are there other (better, more well-known) ways to do the same thing?• Is it worth the effort?• Is it worth the money?
  19. 19. Usability + Usefulness =User experience (UX)
  20. 20. How do you create agood User Experience?
  21. 21. Don’t listen to the users
  22. 22. Demands”People will often say ’I’d like it better if it could do x’.It always pays to be suspicious of these requests for newfeatures. If you probe deeper, it often turns out that theyalready have a perfectly fine source for x – and wouldn’t belikely to switch: they’re just telling you what they like.” Steve Krug: Don’t make me think
  23. 23. Watch the users
  24. 24. Observe usersin their own environment
  25. 25. Spalding’s new basketball
  26. 26. Spalding’s new basketball • Ball includes internal micro-pump, hidden inside the ball • Pops up when needed • Focus groups did not catch this user requirement • What happened to market share?
  27. 27. Spalding’s new basketball
  28. 28. Spalding’s new basketball • Market share up from 32 % to 64 % in one year!
  29. 29. How do you design?What do you design?
  30. 30. User interface:Three kinds of design
  31. 31. Let’s make a digital interface 24
  32. 32. • There will be tabs at the top, but ...
  33. 33. • Color?
  34. 34. • Color?• Shade?
  35. 35. • Color?• Shade?• Form?
  36. 36. • Color?• Shade?• Form?• Shadow?
  37. 37. • Color?• Shade?• Form?• Shadow?• Border?
  38. 38. • Color?• Shade?• Form?• Shadow?• Border?• Spacing?
  39. 39. Moscow
  40. 40. Moscow Izjevsk
  41. 41. Moscow Izjevsk Peterburg
  42. 42. Moscow Izjevsk Peterburg Vladivostok
  43. 43. Moscow Izjevsk Peterburg Vladivostok Novgorod
  44. 44. Moscow Izjevsk Peterburg Vladivostok Novgorod• What names?
  45. 45. Moscow Izjevsk Peterburg Vladivostok Novgorod• What names?• What order? Size, geography, alphabetical ...
  46. 46. Moscow Izjevsk Peterburg Vladivostok Novgorod• What names?• What order? Size, geography, alphabetical ...• What goes under each heading?
  47. 47. Moscow
  48. 48. Moscow Izjevsk
  49. 49. Moscow Izjevsk Peterburg
  50. 50. Moscow Izjevsk Peterburg Vladivostok
  51. 51. Moscow Izjevsk Peterburg Vladivostok Novgorod
  52. 52. Moscow Izjevsk Peterburg Vladivostok Novgorod• What to do with the button? How does it react?
  53. 53. Moscow Izjevsk Peterburg Vladivostok Novgorod• What to do with the button? How does it react?• What happens on mouseover?
  54. 54. Moscow Izjevsk Peterburg Vladivostok Novgorod• What to do with the button? How does it react?• What happens on mouseover?• What happens on click? What service starts?
  55. 55. Moscow Izjevsk Peterburg Vladivostok Novgorod• What to do with the button? How does it react?• What happens on mouseover?• What happens on click? What service starts?• Can you cancel that action?
  56. 56. graphicdesign
  57. 57. graphic designview, enjoy
  58. 58. graphic information design designview, enjoy
  59. 59. graphic information design designview, enjoy find, understand, interpret
  60. 60. interaction design graphic information design designview, enjoy find, understand, interpret
  61. 61. interaction do, buy, design download, register graphic information design designview, enjoy find, understand, interpret
  62. 62. Color, form,typography, mood
  63. 63. Titles,Color, form, headlines,typography, labels, disposition, mood links, search
  64. 64. Forms, buttons, task flow, error messages, Titles,Color, form, headlines,typography, labels, disposition, mood links, search
  65. 65. Forms, buttons, task flow, error messages, feedback Titles,Color, form, headlines,typography, labels, disposition, mood links, search
  66. 66. interaction do, buy, design download, register graphic information design designview, enjoy find, understand
  67. 67. User experience interaction do, buy, design download, register graphic information design designview, enjoy find, understand
  68. 68. interaction designgraphic informationdesign design
  69. 69. interaction design graphic information design design marketing,movie trailer
  70. 70. interaction design graphic information design design organization, government marketing, documentmovie trailer managment,
  71. 71. e-commerce, transactional systems interaction design graphic information design design organization, government marketing, documentmovie trailer managment,
  72. 72. voice, accent,prosody, speed(visceral design)
  73. 73. voice, accent, menuprosody, system speed ”press 1 for(visceral x, press 2 design) for Z
  74. 74. time for entering? press ahead/barge in? voice, accent, menuprosody, system speed ”press 1 for(visceral x, press 2 design) for Z
  75. 75. interaction designgraphic informationdesign design
  76. 76. interaction design graphic information design designbrand strategist
  77. 77. interaction design graphic information design designbrand strategist marketing
  78. 78. interaction design graphic information design designbrand strategist marketing information dept
  79. 79. system architects interaction design graphic information design designbrand strategist marketing information dept
  80. 80. it dept system architects interaction design graphic information design designbrand strategist marketing information dept
  81. 81. it dept developers system architects interaction design graphic information design designbrand strategist marketing information dept
  82. 82. Cooperation interaction designgraphic informationdesign design
  83. 83. Cooperation interaction design graphic information design designMost have all parts!
  84. 84. Cooperation interaction design graphic information design designMost have all parts! Where things go wrong!
  85. 85. Search function interaction design graphic information design design
  86. 86. Search function Search interface interaction design graphic information design design
  87. 87. Search function Search interface interaction design How are things labeled? graphic information design design
  88. 88. interaction do, buy, design download, register graphic information design designview, enjoy find, understand
  89. 89. Information architecture interaction do, buy, design download, register graphic information design designview, enjoy find, understand
  90. 90. Information architecture interaction do, buy, design download,Information register architect graphic information design design view, enjoy find, understand
  91. 91. Startsbrowsing
  92. 92. Seems Starts OK?browsing
  93. 93. Seems Starts OK?browsing Unpleasant, slow – leaves
  94. 94. Seems Where is Starts OK? the stuffbrowsing I need? Unpleasant, slow – leaves
  95. 95. Seems Where is Starts OK? the stuffbrowsing I need? Can’t find – leaves Unpleasant, slow – leaves
  96. 96. Let me do what I want / to do Seems Where is Starts OK? the stuffbrowsing I need? Can’t find – leaves Unpleasant, slow – leaves
  97. 97. Can’t do – leaves Let me do what I want / to do Seems Where is Starts OK? the stuffbrowsing I need? Can’t find – leaves Unpleasant, slow – leaves
  98. 98. Can’t do my business Looks Can’t find Starts ugly whatbrowsing I need
  99. 99. Can’t do my business Looks Can’t find Starts ugly whatbrowsing I need
  100. 100. Can’t do my business Looks Can’t find Starts ugly whatbrowsing I need
  101. 101. Can’t do my business Looks Can’t find Starts ugly whatbrowsing I need
  102. 102. Subject to change?
  103. 103. Subject to change?• Graphic design can often be changed very quickly (templates, style sheets)
  104. 104. Subject to change?• Graphic design can often be changed very quickly (templates, style sheets)• Information design – can be changed, but will take time and must often be done by hand
  105. 105. Subject to change?• Graphic design can often be changed very quickly (templates, style sheets)• Information design – can be changed, but will take time and must often be done by hand• Interaction design – huge cost, if changes are possible at all.
  106. 106. Risk vs effort• Bad graphic design is usually the greatest threshold for acceptance • Users judge digital systems very fast• Bad information design is the biggest problem in use• Bad interaction design has the greatest potential to hurt your brand or the relation with your customers – for a very long time
  107. 107. Unnecessary labels
  108. 108. Unnecessary labelsName: Eric SmithE-mail: eric@smith.comCompany: Acme, Inc.Credit: 5 000 €
  109. 109. Unnecessary labelsName: Eric SmithE-mail: eric@smith.comCompany: Acme, Inc. Name: Eric SmithCredit: 5 000 € E-mail: eric@smith.com Company: Acme, Inc. Credit: 5 000 €
  110. 110. Unnecessary labelsName: Eric SmithE-mail: eric@smith.comCompany: Acme, Inc. Name: Eric SmithCredit: 5 000 € E-mail: eric@smith.com Company: Acme, Inc. Eric Smith Credit: 5 000 € eric@smith.com Acme, Inc. 5 000 € +4670-1234567 (home)
  111. 111. Unnecessary labels
  112. 112. Too much information
  113. 113. Too much information
  114. 114. Too much information
  115. 115. Too much information
  116. 116. Unnecessaryicons• Good to distinguish things from each other
  117. 117. Icons are hard to understand • Imprisoned! • Let’s go to the woods!
  118. 118. Wrong flow
  119. 119. Every user fooled! • Everyone clicked “Cancel”!

×