An  Introduction  to Usability Dirk Swart Web Technologies Director University Communications
 
Keywords Simplicity User orientation Trade-offs Ease of use Patterns Reversability Details
Why do usability? <ul><li>Diebold Voting System Has 'Delete' Button for Erasing Audit Logs </li></ul><ul><li>Wired News (0...
 
“ Commandeer. Technical term. We’re going to commandeer that ship”.
Progressive disclosure :   Showing overviews and hiding details until the user requests them. Affective :  Appealing to th...
Insert photo of Mann Library doors
Academics for $200 please Alex What do economists study most?
A: Money B: People C: Utility D: !@#$# economists! What do economists study most?
 
C: Utility We will call this ‘happiness’ or ‘satisfaction’. “…changes in utility are sometimes expressed in units called u...
<ul><li>For our purposes … </li></ul><ul><li>Something is  Pareto Optimal  if we can’t make someone better off without mak...
 
Usability: “ The degree to which an object, device, software application, etc. is easy to use with no specific training”  ...
Usability: “ The degree to which an object, device, software application, etc. is easy to use with no specific training”  ...
Usability: “ The degree to which an object, device, software application, etc. is easy to use with  no specific training ”...
User Experience: “Impression left in a person's mind after the sum of a series on interactions.”
Q: Who decides if a website is easy to use?
 
A: Your target audience But that is not very informative - will discuss more.
Click … Whirr
<ul><li>Fixed Action Pattern: </li></ul><ul><li>A behavioral sequence that runs to completion. </li></ul><ul><li>It has a ...
Q:
<ul><li>Form Follows Function </li></ul>Beyond the introductory level this principle becomes more complicated. But this is...
Rule 1
<ul><li>Web behavior is always rushed: </li></ul><ul><li>Your website is a means to an end.  </li></ul>Rule 1
Implications <ul><li>Good design  ≠  easy to use. </li></ul><ul><li>Simplicity is a  choice. </li></ul>
<ul><li>Total Visitor time =    search time  + load time  + browse time + scan time </li></ul><ul><li>Think utility. </li>...
<ul><li>Consistency & Expectations </li></ul>Rule 2
<ul><li>Patterns Count </li></ul>
<ul><li>Thinky things … </li></ul>Interlude
<ul><li>Ready to hand </li></ul><ul><li>Present at hand </li></ul>
 
OK, back to work
<ul><li>People  </li></ul><ul><li>expect  </li></ul><ul><li>patterns </li></ul>
Rule 2 Looks right,  but isn’t
 
<ul><li>Law School vanishing menus </li></ul>
<ul><li>People try  stuff  </li></ul>Rule 3
Implications <ul><li>Words Count.  Words are the steak, not the sizzle.  </li></ul><ul><li>(And use sans serif, scalable. ...
Implications <ul><li>Plan for the scent of information. </li></ul><ul><li>Be reversible. Allow users to undo mistakes. </l...
<ul><li>Don't let the exciting, the periphery, drive you out of your core business  </li></ul>Rule 3
<ul><li>Don’t focus on everything equally:  Vegas effect. </li></ul><ul><li>What is the  most  important: remember economi...
It’s ALL details Bonus
Common Mistakes
<ul><li>Heavy Pages <- violates rule 1 </li></ul>When OK? If you have a pattern. Eg: Amazon.com
<ul><li>Heavy Pages <- violates rule 1 </li></ul>When OK? If you have a pattern. Eg: Amazon.com
<ul><li>Ambiguous choices <- violates rule 3  </li></ul>
<ul><li>Ambiguous choices <- violates rule 3  </li></ul>
 
<ul><li>Lack of focus - Violates rule 4?  </li></ul>
Summary <ul><li>Usability is important. You think so they don’t have to. </li></ul><ul><li>Every decision is a trade-off. ...
More Information? <ul><li>MIT Usability Guidelines: http://web.mit.edu/is/usability/usability-guidelines.html </li></ul><u...
<ul><li>&quot;Civilization advances by extending the number of operations we can perform without thinking about them“ </li...
Usability Testing <ul><li>End User Usability </li></ul><ul><ul><li>161 Secondary School Teachers filled in on line form. <...
Usability Findings - Overall <ul><li>68.3% used the net to find educational information </li></ul><ul><ul><li>37% had  nev...
Usability Findings - Interface <ul><li>Search </li></ul><ul><ul><li>55% of respondents did not like the “simple search”.  ...
Key Features of our execution <ul><li>Search and Browse </li></ul><ul><li>Not trying to replace other sites. Refers people...
Example:  Alice and Bob
 
Usability Economics Psychology Human Factors Tips &Tricks 4 Rules Bauhaus Click, Whirr Choices, choices Scent Utility Theo...
Upcoming SlideShare
Loading in...5
×

An Introduction to Usability

1,761

Published on

An introduction to usability for general audiences. It presents principles, three base rules and specific examples.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,761
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
83
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Notes: Less technical. Show rule then principle. Start with the humboldt county error to explain importance, remove the confirm button. Don’t go into the pareto thing – just say make people better off without making people worse off, and tradeoffs. Use lab of O for choices.
  • An Introduction to Usability

    1. 1. An Introduction to Usability Dirk Swart Web Technologies Director University Communications
    2. 3. Keywords Simplicity User orientation Trade-offs Ease of use Patterns Reversability Details
    3. 4. Why do usability? <ul><li>Diebold Voting System Has 'Delete' Button for Erasing Audit Logs </li></ul><ul><li>Wired News (03/03/09) Zetter, Kim </li></ul><ul><li>Auditors report: </li></ul><ul><li>&quot;The proximity of the clear button to the &quot;print&quot; and &quot;save as&quot; buttons raises the risk of the logs being erased accidentally, and the system provides no warning to operators of the danger of clicking on the button.&quot; </li></ul>
    4. 6. “ Commandeer. Technical term. We’re going to commandeer that ship”.
    5. 7. Progressive disclosure : Showing overviews and hiding details until the user requests them. Affective : Appealing to the emotions of the user. Affordance : Property of a thing which determines how it is (or can be) used.
    6. 8. Insert photo of Mann Library doors
    7. 9. Academics for $200 please Alex What do economists study most?
    8. 10. A: Money B: People C: Utility D: !@#$# economists! What do economists study most?
    9. 12. C: Utility We will call this ‘happiness’ or ‘satisfaction’. “…changes in utility are sometimes expressed in units called utils.” (Wikipedia)
    10. 13. <ul><li>For our purposes … </li></ul><ul><li>Something is Pareto Optimal if we can’t make someone better off without making someone else worse off. </li></ul>
    11. 15. Usability: “ The degree to which an object, device, software application, etc. is easy to use with no specific training” - Wikipedia
    12. 16. Usability: “ The degree to which an object, device, software application, etc. is easy to use with no specific training” - Wikipedia “ Quite simply, usability is making your site easy for your customers to find the exact information they need when they need it.” – www.searchenginewriting.com
    13. 17. Usability: “ The degree to which an object, device, software application, etc. is easy to use with no specific training ” - Wikipedia “ Quite simply, usability is making your site easy for your customers to find the exact information they need when they need it.” – www.searchenginewriting.com “ Usability is the study of how to Pareto optimize your website or application”
    14. 18. User Experience: “Impression left in a person's mind after the sum of a series on interactions.”
    15. 19. Q: Who decides if a website is easy to use?
    16. 21. A: Your target audience But that is not very informative - will discuss more.
    17. 22. Click … Whirr
    18. 23. <ul><li>Fixed Action Pattern: </li></ul><ul><li>A behavioral sequence that runs to completion. </li></ul><ul><li>It has a trigger feature (releaser) plus a sequence, and in people is usually cultural. </li></ul><ul><li>Our take home: People like patterns. </li></ul><ul><li>We’ll come back to this in a bit. </li></ul>
    19. 24. Q:
    20. 25. <ul><li>Form Follows Function </li></ul>Beyond the introductory level this principle becomes more complicated. But this is an introduction to usability, so we’ll stick with it We’ll come back to this in a bit too. Function first. Then form.
    21. 26. Rule 1
    22. 27. <ul><li>Web behavior is always rushed: </li></ul><ul><li>Your website is a means to an end. </li></ul>Rule 1
    23. 28. Implications <ul><li>Good design ≠ easy to use. </li></ul><ul><li>Simplicity is a choice. </li></ul>
    24. 29. <ul><li>Total Visitor time = search time + load time + browse time + scan time </li></ul><ul><li>Think utility. </li></ul>
    25. 30. <ul><li>Consistency & Expectations </li></ul>Rule 2
    26. 31. <ul><li>Patterns Count </li></ul>
    27. 32. <ul><li>Thinky things … </li></ul>Interlude
    28. 33. <ul><li>Ready to hand </li></ul><ul><li>Present at hand </li></ul>
    29. 35. OK, back to work
    30. 36. <ul><li>People </li></ul><ul><li>expect </li></ul><ul><li>patterns </li></ul>
    31. 37. Rule 2 Looks right, but isn’t
    32. 39. <ul><li>Law School vanishing menus </li></ul>
    33. 40. <ul><li>People try stuff </li></ul>Rule 3
    34. 41. Implications <ul><li>Words Count. Words are the steak, not the sizzle. </li></ul><ul><li>(And use sans serif, scalable. No A -A band aid crap) </li></ul>
    35. 42. Implications <ul><li>Plan for the scent of information. </li></ul><ul><li>Be reversible. Allow users to undo mistakes. </li></ul>Garden Path: a sequence of actions a user takes that each seem to be leading to the desired outcome but don't produce the desired result in the end.
    36. 43. <ul><li>Don't let the exciting, the periphery, drive you out of your core business </li></ul>Rule 3
    37. 44. <ul><li>Don’t focus on everything equally: Vegas effect. </li></ul><ul><li>What is the most important: remember economics </li></ul>Rule 4
    38. 45. It’s ALL details Bonus
    39. 46. Common Mistakes
    40. 47. <ul><li>Heavy Pages <- violates rule 1 </li></ul>When OK? If you have a pattern. Eg: Amazon.com
    41. 48. <ul><li>Heavy Pages <- violates rule 1 </li></ul>When OK? If you have a pattern. Eg: Amazon.com
    42. 49. <ul><li>Ambiguous choices <- violates rule 3 </li></ul>
    43. 50. <ul><li>Ambiguous choices <- violates rule 3 </li></ul>
    44. 52. <ul><li>Lack of focus - Violates rule 4? </li></ul>
    45. 53. Summary <ul><li>Usability is important. You think so they don’t have to. </li></ul><ul><li>Every decision is a trade-off. </li></ul><ul><li>If you can, separate design, usability, focus, user experience. They are different. </li></ul><ul><li>Learn the vocabulary </li></ul>
    46. 54. More Information? <ul><li>MIT Usability Guidelines: http://web.mit.edu/is/usability/usability-guidelines.html </li></ul><ul><li>SUS, a quick and dirty usability scale http://www.usabilitynet.org/trump/documents/Suschapt.doc </li></ul><ul><li>Designing for the Scent of Information Email me for a copy </li></ul><ul><li>Vocabulary http://www.usabilityfirst.com/glossary/main.cgi </li></ul><ul><li>Humor http://www.ok-cancel.com </li></ul><ul><li>Yahoo Design Pattern Library http://developer.yahoo.com/ypatterns/ </li></ul>
    47. 55. <ul><li>&quot;Civilization advances by extending the number of operations we can perform without thinking about them“ </li></ul><ul><li>Alfred North Whitehead </li></ul><ul><li>(1861 – 1947) </li></ul>
    48. 56. Usability Testing <ul><li>End User Usability </li></ul><ul><ul><li>161 Secondary School Teachers filled in on line form. </li></ul></ul><ul><ul><ul><li>73% had no affiliation to Cornell, 7.5% were Cornell alums. </li></ul></ul></ul><ul><ul><ul><li>46% were not within driving distance of Cornell. </li></ul></ul></ul><ul><li>Admin Usability </li></ul><ul><ul><li>8 Detailed interviews (1 hr +) conducted on 1 day. </li></ul></ul><ul><li>Effort to produce these results: </li></ul><ul><ul><li>End user: 160 hours over a month, Admin; 45 hours over three weeks. </li></ul></ul>
    49. 57. Usability Findings - Overall <ul><li>68.3% used the net to find educational information </li></ul><ul><ul><li>37% had never looked for educational materials at Cornell. 27% had looked “once or twice” </li></ul></ul><ul><ul><li>They expected access to a very broad range of material. </li></ul></ul><ul><ul><li>33% would expect to find material in ‘Outreach’ section. </li></ul></ul>
    50. 58. Usability Findings - Interface <ul><li>Search </li></ul><ul><ul><li>55% of respondents did not like the “simple search”. </li></ul></ul><ul><ul><li>Simple search with Primary and Secondary browse was most preferred. </li></ul></ul><ul><ul><ul><li>Browsing as a hierarchical sequence “is desirable” > 86%) </li></ul></ul></ul><ul><ul><li>>90% said program profile page was well designed. </li></ul></ul><ul><li>Search + Browse ‘front and center’ is essential. </li></ul>
    51. 59. Key Features of our execution <ul><li>Search and Browse </li></ul><ul><li>Not trying to replace other sites. Refers people onward at Cornell. </li></ul><ul><li>Reports: </li></ul><ul><ul><li>Ability to revise search and browse. </li></ul></ul><ul><ul><li>Add to taxonomy </li></ul></ul><ul><ul><li>Track and count search terms </li></ul></ul>
    52. 60. Example: Alice and Bob
    53. 62. Usability Economics Psychology Human Factors Tips &Tricks 4 Rules Bauhaus Click, Whirr Choices, choices Scent Utility Theory SUS Examples More information
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×