Fastdev 1
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Fastdev 1

on

  • 520 views

Usability for

Usability for

Statistics

Views

Total Views
520
Views on SlideShare
520
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Den här bilden på användaren är ganska rörig. Men den finns här just för att visa på hur många andra saker vi har i vår miljö som pockar på vår uppmärksamhet, som vi måste ta tag i, som väntar på att göras. Det här föreställer en arbetsmiljö, men ni vet själva hur det är i hemmiljön också - disk, barn, familj, husdjur, städning, räkningar, … vi har mycket att göra och vi vill ha det gjort snabbt.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Fastdev 1 Presentation Transcript

  • 1. Usability и.т.д.FastDev • 02–02–11
  • 2. Jonas Söderström
  • 3. 1977 – Jonas Söderström
  • 4. 1977 –1994 – Jonas Söderström
  • 5. ”User friendly”
  • 6. ”User friendly”
  • 7. Usable
  • 8. Usability is ... ?
  • 9. Easy to use - how? Easy to remember
  • 10. Easy to use - how? Easy to remember
  • 11. Easy to use - how? Easy to learn Easy to remember
  • 12. Easy to use - how? Easy to learn Efficient Easy to remember
  • 13. Easy to use - how? Easy to learn Efficient Easy to Error remember reduction
  • 14. Easy to use - how? Easy to learn User’s subjective Efficientsatisfaction Easy to Error remember reduction
  • 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. Usability =Could I use it?
  • 17. Useful =Would I use it?
  • 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. Usability + Usefulness =User experience (UX)
  • 20. How do you create agood User Experience?
  • 21. Don’t listen to the users
  • 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. Watch the users
  • 24. Observe usersin their own environment
  • 25. Spalding’s new basketball
  • 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. Spalding’s new basketball
  • 28. Spalding’s new basketball • Market share up from 32 % to 64 % in one year!
  • 29. How do you design?What do you design?
  • 30. User interface:Three kinds of design
  • 31. Let’s make a digital interface 24
  • 32. • There will be tabs at the top, but ...
  • 33. • Color?
  • 34. • Color?• Shade?
  • 35. • Color?• Shade?• Form?
  • 36. • Color?• Shade?• Form?• Shadow?
  • 37. • Color?• Shade?• Form?• Shadow?• Border?
  • 38. • Color?• Shade?• Form?• Shadow?• Border?• Spacing?
  • 39. Moscow
  • 40. Moscow Izjevsk
  • 41. Moscow Izjevsk Peterburg
  • 42. Moscow Izjevsk Peterburg Vladivostok
  • 43. Moscow Izjevsk Peterburg Vladivostok Novgorod
  • 44. Moscow Izjevsk Peterburg Vladivostok Novgorod• What names?
  • 45. Moscow Izjevsk Peterburg Vladivostok Novgorod• What names?• What order? Size, geography, alphabetical ...
  • 46. Moscow Izjevsk Peterburg Vladivostok Novgorod• What names?• What order? Size, geography, alphabetical ...• What goes under each heading?
  • 47. Moscow
  • 48. Moscow Izjevsk
  • 49. Moscow Izjevsk Peterburg
  • 50. Moscow Izjevsk Peterburg Vladivostok
  • 51. Moscow Izjevsk Peterburg Vladivostok Novgorod
  • 52. Moscow Izjevsk Peterburg Vladivostok Novgorod• What to do with the button? How does it react?
  • 53. Moscow Izjevsk Peterburg Vladivostok Novgorod• What to do with the button? How does it react?• What happens on mouseover?
  • 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. 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. graphicdesign
  • 57. graphic designview, enjoy
  • 58. graphic information design designview, enjoy
  • 59. graphic information design designview, enjoy find, understand, interpret
  • 60. interaction design graphic information design designview, enjoy find, understand, interpret
  • 61. interaction do, buy, design download, register graphic information design designview, enjoy find, understand, interpret
  • 62. Color, form,typography, mood
  • 63. Titles,Color, form, headlines,typography, labels, disposition, mood links, search
  • 64. Forms, buttons, task flow, error messages, Titles,Color, form, headlines,typography, labels, disposition, mood links, search
  • 65. Forms, buttons, task flow, error messages, feedback Titles,Color, form, headlines,typography, labels, disposition, mood links, search
  • 66. interaction do, buy, design download, register graphic information design designview, enjoy find, understand
  • 67. User experience interaction do, buy, design download, register graphic information design designview, enjoy find, understand
  • 68. interaction designgraphic informationdesign design
  • 69. interaction design graphic information design design marketing,movie trailer
  • 70. interaction design graphic information design design organization, government marketing, documentmovie trailer managment,
  • 71. e-commerce, transactional systems interaction design graphic information design design organization, government marketing, documentmovie trailer managment,
  • 72. voice, accent,prosody, speed(visceral design)
  • 73. voice, accent, menuprosody, system speed ”press 1 for(visceral x, press 2 design) for Z
  • 74. time for entering? press ahead/barge in? voice, accent, menuprosody, system speed ”press 1 for(visceral x, press 2 design) for Z
  • 75. interaction designgraphic informationdesign design
  • 76. interaction design graphic information design designbrand strategist
  • 77. interaction design graphic information design designbrand strategist marketing
  • 78. interaction design graphic information design designbrand strategist marketing information dept
  • 79. system architects interaction design graphic information design designbrand strategist marketing information dept
  • 80. it dept system architects interaction design graphic information design designbrand strategist marketing information dept
  • 81. it dept developers system architects interaction design graphic information design designbrand strategist marketing information dept
  • 82. Cooperation interaction designgraphic informationdesign design
  • 83. Cooperation interaction design graphic information design designMost have all parts!
  • 84. Cooperation interaction design graphic information design designMost have all parts! Where things go wrong!
  • 85. Search function interaction design graphic information design design
  • 86. Search function Search interface interaction design graphic information design design
  • 87. Search function Search interface interaction design How are things labeled? graphic information design design
  • 88. interaction do, buy, design download, register graphic information design designview, enjoy find, understand
  • 89. Information architecture interaction do, buy, design download, register graphic information design designview, enjoy find, understand
  • 90. Information architecture interaction do, buy, design download,Information register architect graphic information design design view, enjoy find, understand
  • 91. Startsbrowsing
  • 92. Seems Starts OK?browsing
  • 93. Seems Starts OK?browsing Unpleasant, slow – leaves
  • 94. Seems Where is Starts OK? the stuffbrowsing I need? Unpleasant, slow – leaves
  • 95. Seems Where is Starts OK? the stuffbrowsing I need? Can’t find – leaves Unpleasant, slow – leaves
  • 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. 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. Can’t do my business Looks Can’t find Starts ugly whatbrowsing I need
  • 99. Can’t do my business Looks Can’t find Starts ugly whatbrowsing I need
  • 100. Can’t do my business Looks Can’t find Starts ugly whatbrowsing I need
  • 101. Can’t do my business Looks Can’t find Starts ugly whatbrowsing I need
  • 102. Subject to change?
  • 103. Subject to change?• Graphic design can often be changed very quickly (templates, style sheets)
  • 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. 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. 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. Unnecessary labels
  • 108. Unnecessary labelsName: Eric SmithE-mail: eric@smith.comCompany: Acme, Inc.Credit: 5 000 €
  • 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. 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. Unnecessary labels
  • 112. Too much information
  • 113. Too much information
  • 114. Too much information
  • 115. Too much information
  • 116. Unnecessaryicons• Good to distinguish things from each other
  • 117. Icons are hard to understand • Imprisoned! • Let’s go to the woods!
  • 118. Wrong flow
  • 119. Every user fooled! • Everyone clicked “Cancel”!