Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SM2701 Class 04

464 views

Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

SM2701 Class 04

  1. 1. SM2701 – Class 04 Human computer interaction … continued Interface and presentation design
  2. 2. SM2701 – Class 04 Performance vs. Convention
  3. 3. SM2701 – Class 04 Gutenberg’s Diagram
  4. 4. SM2701 – Class 04 Fitts’s Law
  5. 5. SM2701 – Class 04 Fitts’s Law In physical interaction design
  6. 6. SM2701 – Class 04 Fitts’s Law
  7. 7. SM2701 – Class 04 Fitts’s Law Pixels around the current mouse pointer. Lower right corner Upper left corner Upper right corner Lower left corner
  8. 8. SM2701 – Class 04 Top left lighting Note the drop shadow of interface icons
  9. 9. SM2701 – Class 04 Garbage in Garbage out
  10. 10. SM2701 – Class 04 Garbage in Garbage out
  11. 11. SM2701 – Class 04 Noise
  12. 12. SM2701 – Class 04 Flexibility vs. usability
  13. 13. SM2701 – Class 04 Desktop application posture Sovereign Transient Daemonic
  14. 14. SM2701 – Class 04 Sovereign posture
  15. 15. SM2701 – Class 04 Sovereign posture Optimize sovereign applications for full screen use. Sovereign interfaces should feature a conservative visual style. Sovereign applications should exploit rich input. Maximize document views within sovereign applications.
  16. 16. SM2701 – Class 04 Transient posture
  17. 17. SM2701 – Class 04 Transient posture Transient applications must be simple, clear, and to the point. Transient applications should be limited to a single window and view. A transient application should launch to its previous position and configuration.
  18. 18. SM2701 – Class 04 Web applications Information web sites Transactional web sites Web applications
  19. 19. SM2701 – Class 04 Dialog box
  20. 20. SM2701 – Class 04 Dialog box
  21. 21. SM2701 – Class 04 Tabs
  22. 22. SM2701 – Class 04 Bread crumb
  23. 23. SM2701 – Class 04 Mental model
  24. 24. SM2701 – Class 04 Mental model
  25. 25. SM2701 – Class 04 Overview
  26. 26. SM2701 – Class 04 Overview
  27. 27. SM2701 – Class 04 Scroll bar
  28. 28. SM2701 – Class 04 Scroll bar
  29. 29. SM2701 – Class 04 Word Count – MS Word 2003
  30. 30. SM2701 – Class 04 Word Count – MS Word 2007
  31. 31. SM2701 – Class 04 Default button
  32. 32. SM2701 – Class 04 More buttons
  33. 33. SM2701 – Class 04 Visual structure vs. information structure
  34. 34. SM2701 – Class 04 Visual structure vs. information structure
  35. 35. SM2701 – Class 04 Visual structure vs. information structure
  36. 36. SM2701 – Class 04 Visual structure vs. information structure
  37. 37. SM2701 – Class 04 Visual structure vs. information structure
  38. 38. SM2701 – Class 04 Visual structure vs. information structure
  39. 39. SM2701 – Class 04 Visual structure vs. information structure
  40. 40. SM2701 – Class 04 Visual structure vs. information structure
  41. 41. SM2701 – Class 04 Visual structure vs. information structure
  42. 42. SM2701 – Class 04 Metaphor
  43. 43. SM2701 – Class 04 Desktop metaphor
  44. 44. SM2701 – Class 04 Grid structure
  45. 45. SM2701 – Class 04 Grid structure
  46. 46. SM2701 – Class 04 Grid structure
  47. 47. SM2701 – Class 04 What can you do with it?
  48. 48. SM2701 – Class 04 Common mistakes <ul><li>Page not structured in prioritized order </li></ul><ul><li>Interactions overly complex and don’t offer guidance </li></ul><ul><li>Related areas not grouped in close proximity </li></ul><ul><li>Elements not properly aligned to create order </li></ul><ul><li>Elements not placed where people expect </li></ul><ul><li>Too many elements on page </li></ul>
  49. 49. SM2701 – Class 04
  50. 50. SM2701 – Class 04
  51. 51. SM2701 – Class 04
  52. 52. SM2701 – Class 04
  53. 53. SM2701 – Class 04
  54. 54. SM2701 – Class 04
  55. 55. SM2701 – Class 04
  56. 56. SM2701 – Class 04
  57. 57. SM2701 – Class 04
  58. 58. SM2701 – Class 04
  59. 59. SM2701 – Class 04
  60. 60. SM2701 – Class 04
  61. 61. SM2701 – Class 04
  62. 62. SM2701 – Class 04
  63. 63. SM2701 – Class 04
  64. 64. SM2701 – Class 04
  65. 65. SM2701 – Class 04
  66. 66. SM2701 – Class 04
  67. 67. SM2701 – Class 04
  68. 68. SM2701 – Class 04
  69. 69. SM2701 – Class 04
  70. 70. SM2701 – Class 04
  71. 71. SM2701 – Class 04
  72. 72. SM2701 – Class 04
  73. 73. SM2701 – Class 04
  74. 74. SM2701 – Class 04
  75. 75. SM2701 – Class 04
  76. 76. SM2701 – Class 04
  77. 77. SM2701 – Class 04
  78. 78. SM2701 – Class 04
  79. 79. SM2701 – Class 04 Type Contrast
  80. 80. SM2701 – Class 04 Type guidelines <ul><li>Use common fonts sized at 10 or above </li></ul><ul><li>Avoid busy backgrounds </li></ul><ul><li>Use black text on white </li></ul><ul><li>Keep animated, all-cap, graphical text to a minimum </li></ul>
  81. 81. SM2701 – Class 04 Type guidelines CAN YOU READ ME NOW?
  82. 82. SM2701 – Class 04 Type guidelines Can you read me now?
  83. 83. SM2701 – Class 04 Type guidelines Can you read me now?
  84. 84. SM2701 – Class 04 Type guidelines Can you read me now?

×