User Interface Principles 2013

337 views
277 views

Published on

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

No Downloads
Views
Total views
337
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

User Interface Principles 2013

  1. 1. 3 — User Interface Principles From Code to Product gidgreen.com/course
  2. 2. Lecture 3 •  Introduction •  Vision •  Cognition •  Memory •  Action •  Emotion From Code to Product Lecture 3 — UI Principles — Slide 2 gidgreen.com/course
  3. 3. User Interface “The aspects of a computer system or program which can be seen (or heard or otherwise perceived) by the human user, and the commands and mechanisms the user uses to control its operation and input data.” — Free On-Line Dictionary of Computing From Code to Product Lecture 3 — UI Principles — Slide 3 gidgreen.com/course
  4. 4. Other terms •  Graphical user interface •  User experience •  Interaction design •  Human-computer interaction •  Usability •  Information architecture From Code to Product Lecture 3 — UI Principles — Slide 4 gidgreen.com/course
  5. 5. Layers of a product From Code to Product Lecture 3 — UI Principles — Slide 5 gidgreen.com/course Core
  6. 6. The problem From Code to Product Lecture 3 — UI Principles — Slide 6 gidgreen.com/course I want to see this guy’s face MOV r0, #10 ADD r0, r0, r1 How do we bridge this gap?
  7. 7. The solution From Code to Product Lecture 3 — UI Principles — Slide 7 gidgreen.com/course I want to see this guy’s face MOV r0, #10 ADD r0, r0, r1 I can use Skype on my mobile I will press his name in the app Function call in Skype app Touch event detected
  8. 8. Channels of communication From Code to Product Lecture 3 — UI Principles — Slide 8 gidgreen.com/course Pressing buttons Pointing on screen Talking and singing Being photographed Moving the device Flashing lights Image on screen Playing sound Vibration
  9. 9. Lecture 3 •  Introduction •  Vision •  Cognition •  Memory •  Action •  Emotion From Code to Product Lecture 3 — UI Principles — Slide 9 gidgreen.com/course
  10. 10. Vision From Code to Product Lecture 3 — UI Principles — Slide 10 gidgreen.com/course
  11. 11. Proximity From Code to Product Lecture 3 — UI Principles — Slide 11 gidgreen.com/course
  12. 12. Similarity From Code to Product Lecture 3 — UI Principles — Slide 12 gidgreen.com/course
  13. 13. Similarity From Code to Product Lecture 3 — UI Principles — Slide 13 gidgreen.com/course
  14. 14. Proximity From Code to Product Lecture 3 — UI Principles — Slide 14 gidgreen.com/course
  15. 15. Similarity From Code to Product Lecture 3 — UI Principles — Slide 15 gidgreen.com/course
  16. 16. Similarity From Code to Product Lecture 3 — UI Principles — Slide 16 gidgreen.com/course
  17. 17. Continuity From Code to Product Lecture 3 — UI Principles — Slide 17 gidgreen.com/course
  18. 18. Symmetry From Code to Product Lecture 3 — UI Principles — Slide 18 gidgreen.com/course
  19. 19. Continuity and Symmetry From Code to Product Lecture 3 — UI Principles — Slide 19 gidgreen.com/course
  20. 20. Ambiguity From Code to Product Lecture 3 — UI Principles — Slide 20 gidgreen.com/course
  21. 21. Grids From Code to Product Lecture 3 — UI Principles — Slide 21 gidgreen.com/course
  22. 22. Figure and Ground From Code to Product Lecture 3 — UI Principles — Slide 22 gidgreen.com/course PhotobyShaShaChu
  23. 23. Figure and Ground From Code to Product Lecture 3 — UI Principles — Slide 23 gidgreen.com/course
  24. 24. Hierarchy From Code to Product Lecture 3 — UI Principles — Slide 24 gidgreen.com/course 1 2 4 3 5
  25. 25. Movement From Code to Product Lecture 3 — UI Principles — Slide 25 gidgreen.com/course
  26. 26. Tunnel Vision From Code to Product Lecture 3 — UI Principles — Slide 26 gidgreen.com/course Photo by Ali Khurshid
  27. 27. Tunnel Vision From Code to Product Lecture 3 — UI Principles — Slide 27 gidgreen.com/course
  28. 28. Structure Thank you for your reservation. Your indoor table has been booked for four people at 8 in the evening on Tuesday January 6th 2012 at Sushi Samba. The address is 245 Park Avenue South, between East 19th and 20th Street. You must arrive by 8.15pm to maintain your reservation. In the event of problems, please call the restaurant on 2124759377. Note that the minimum charge is $50 per person. From Code to Product Lecture 3 — UI Principles — Slide 28 gidgreen.com/course
  29. 29. Structure Date Tue 6 Jan Time 8.00pm Latest 8.15pm People 4 Table Indoors Minimum $50/person From Code to Product Lecture 3 — UI Principles — Slide 29 gidgreen.com/course Thank you for your reservation. Sushi Samba 245 Park Avenue South (212) 475–9377
  30. 30. Structure Date Tue 6 Jan Time 8.00pm Latest 8.15pm People 4 Table Indoors Minimum $50/person From Code to Product Lecture 3 — UI Principles — Slide 30 gidgreen.com/course Thank you for your reservation. Sushi Samba 245 Park Avenue South (212) 475–9377
  31. 31. Prominence From Code to Product Lecture 3 — UI Principles — Slide 31 gidgreen.com/course
  32. 32. Prominence From Code to Product Lecture 3 — UI Principles — Slide 32 gidgreen.com/course 1 2 3 4
  33. 33. Sequence From Code to Product Lecture 3 — UI Principles — Slide 33 gidgreen.com/course Source: xkcd.com
  34. 34. Sequence From Code to Product Lecture 3 — UI Principles — Slide 34 gidgreen.com/course
  35. 35. Sequence From Code to Product Lecture 3 — UI Principles — Slide 35 gidgreen.com/course
  36. 36. Sequence From Code to Product Lecture 3 — UI Principles — Slide 36 gidgreen.com/course
  37. 37. Sequence From Code to Product Lecture 3 — UI Principles — Slide 37 gidgreen.com/course
  38. 38. Clutter From Code to Product Lecture 3 — UI Principles — Slide 38 gidgreen.com/course PhotobyMetroCentric
  39. 39. Clutter From Code to Product Lecture 3 — UI Principles — Slide 39 gidgreen.com/course
  40. 40. Minimalism “Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” — Antoine de Saint-Exupéry From Code to Product Lecture 3 — UI Principles — Slide 40 gidgreen.com/course
  41. 41. Minimalism From Code to Product Lecture 3 — UI Principles — Slide 41 gidgreen.com/course The face of a $200b company
  42. 42. Visual affordance From Code to Product Lecture 3 — UI Principles — Slide 42 gidgreen.com/course Source:ChrisElyea.com
  43. 43. Visual affordance From Code to Product Lecture 3 — UI Principles — Slide 43 gidgreen.com/course
  44. 44. A few words about sound… •  Don’t do it, unless… –  Audio/video player –  Game or other experiential product –  Alert from desktop/mobile app –  Phone number entry –  Reassuring key clicks –  Accessibility •  Let users switch it off From Code to Product Lecture 3 — UI Principles — Slide 44 gidgreen.com/course
  45. 45. Lecture 3 •  Introduction •  Vision •  Cognition •  Memory •  Action •  Emotion From Code to Product Lecture 3 — UI Principles — Slide 45 gidgreen.com/course
  46. 46. Cognition Consider babies Ben and Sam. They were born to the same woman, on the same day, in the same month and the same year. Yet they're not twins. How can this be? From Code to Product Lecture 3 — UI Principles — Slide 46 gidgreen.com/course
  47. 47. The ideal interface From Code to Product Lecture 3 — UI Principles — Slide 47 gidgreen.com/course
  48. 48. Implementation model From Code to Product Lecture 3 — UI Principles — Slide 48 gidgreen.com/course
  49. 49. Mental model From Code to Product Lecture 3 — UI Principles — Slide 49 gidgreen.com/course
  50. 50. Talk to people From Code to Product Lecture 3 — UI Principles — Slide 50 gidgreen.com/course
  51. 51. Metaphors From Code to Product Lecture 3 — UI Principles — Slide 51 gidgreen.com/course
  52. 52. Overly literal metaphors From Code to Product Lecture 3 — UI Principles — Slide 52 gidgreen.com/course
  53. 53. Mapping From Code to Product Lecture 3 — UI Principles — Slide 53 gidgreen.com/course Source:UXHero.com
  54. 54. Mapping From Code to Product Lecture 3 — UI Principles — Slide 54 gidgreen.com/course þ ý þ þ ý
  55. 55. Unnecessary burdens From Code to Product Lecture 3 — UI Principles — Slide 55 gidgreen.com/course
  56. 56. Unnecessary burdens From Code to Product Lecture 3 — UI Principles — Slide 56 gidgreen.com/course
  57. 57. This one’s for real From Code to Product Lecture 3 — UI Principles — Slide 57 gidgreen.com/course adminapps.utep.edu/changepassword
  58. 58. Examples + Defaults From Code to Product Lecture 3 — UI Principles — Slide 58 gidgreen.com/course
  59. 59. Interruptions From Code to Product Lecture 3 — UI Principles — Slide 59 gidgreen.com/course
  60. 60. Interruptions From Code to Product Lecture 3 — UI Principles — Slide 60 gidgreen.com/course
  61. 61. Lecture 3 •  Introduction •  Vision •  Cognition •  Memory •  Action •  Emotion From Code to Product Lecture 3 — UI Principles — Slide 61 gidgreen.com/course
  62. 62. Memory From Code to Product Lecture 3 — UI Principles — Slide 62 gidgreen.com/course
  63. 63. Two types of memory From Code to Product Lecture 3 — UI Principles — Slide 63 gidgreen.com/course Short-term Long-term Contents Current task Life history Capacity Tiny (7 items?) Huge Recall Instant Slow Retention Short Eternal Accuracy Perfect Poor Just like… CPU cache Lots of floppy disks
  64. 64. Memory From Code to Product Lecture 3 — UI Principles — Slide 64 gidgreen.com/course
  65. 65. Modes From Code to Product Lecture 3 — UI Principles — Slide 65 gidgreen.com/course
  66. 66. Modes From Code to Product Lecture 3 — UI Principles — Slide 66 gidgreen.com/course
  67. 67. Modes From Code to Product Lecture 3 — UI Principles — Slide 67 gidgreen.com/course Drawing Selection
  68. 68. Modes From Code to Product Lecture 3 — UI Principles — Slide 68 gidgreen.com/course
  69. 69. Context From Code to Product Lecture 3 — UI Principles — Slide 69 gidgreen.com/course Photobyjima
  70. 70. Context From Code to Product Lecture 3 — UI Principles — Slide 70 gidgreen.com/course
  71. 71. Instructions From Code to Product Lecture 3 — UI Principles — Slide 71 gidgreen.com/course ImagebyZoagli
  72. 72. Instructions From Code to Product Lecture 3 — UI Principles — Slide 72 gidgreen.com/course
  73. 73. Instructions From Code to Product Lecture 3 — UI Principles — Slide 73 gidgreen.com/course
  74. 74. Comparisons From Code to Product Lecture 3 — UI Principles — Slide 74 gidgreen.com/course
  75. 75. Offer, don’t ask From Code to Product Lecture 3 — UI Principles — Slide 75 gidgreen.com/course
  76. 76. Offer, don’t ask From Code to Product Lecture 3 — UI Principles — Slide 76 gidgreen.com/course Car$ /bin/set-temperature 73f Temperature set OK Car$ /bin/rear-demister on COMMAND NOT RECOGNIZED
  77. 77. Overviews From Code to Product Lecture 3 — UI Principles — Slide 77 gidgreen.com/course
  78. 78. Autosuggest From Code to Product Lecture 3 — UI Principles — Slide 78 gidgreen.com/course
  79. 79. Show what’s old From Code to Product Lecture 3 — UI Principles — Slide 79 gidgreen.com/course
  80. 80. Show what’s new From Code to Product Lecture 3 — UI Principles — Slide 80 gidgreen.com/course
  81. 81. Consistency From Code to Product Lecture 3 — UI Principles — Slide 81 gidgreen.com/course Source: bhc3.com
  82. 82. Learned mapping From Code to Product Lecture 3 — UI Principles — Slide 82 gidgreen.com/course
  83. 83. Learned affordance From Code to Product Lecture 3 — UI Principles — Slide 83 gidgreen.com/course
  84. 84. Learned idioms From Code to Product Lecture 3 — UI Principles — Slide 84 gidgreen.com/course
  85. 85. Lecture 3 •  Introduction •  Vision •  Cognition •  Memory •  Action •  Emotion From Code to Product Lecture 3 — UI Principles — Slide 85 gidgreen.com/course
  86. 86. Action From Code to Product Lecture 3 — UI Principles — Slide 86 gidgreen.com/course http://www.85qm.de/up/BigRedButton.swf
  87. 87. Goals and subgoals From Code to Product Lecture 3 — UI Principles — Slide 87 gidgreen.com/course Make my friend feel better Send flowers to friend online Call friend up Wait for flowers to arrive Find a flowers website Order the flowers Open web browser Go to google.com Type in “flowers” Choose the best site f l o w e r s
  88. 88. Execute—Evaluate From Code to Product Lecture 3 — UI Principles — Slide 88 gidgreen.com/course Define subgoal Try something sensible Was the subgoal reached? Next subgoal… YES! NO
  89. 89. Execute—Evaluate From Code to Product Lecture 3 — UI Principles — Slide 89 gidgreen.com/course Choose the best site Looks OK, but only first. Back! Seems to be UK only. Back! Seems really pricey. Back! Looks perfect. We’re done! Wikipedia
  90. 90. Enabling evaluation •  Every user action – Key presses and mouse clicks •  Instant results, or… – Waiting cursor (0.1s … 1s) – Progress bar (>1s) •  If invisible… – Confirmation message – Activity logs From Code to Product Lecture 3 — UI Principles — Slide 90 gidgreen.com/course
  91. 91. Evaluation From Code to Product Lecture 3 — UI Principles — Slide 91 gidgreen.com/course
  92. 92. Information scent •  Information = food – We follow a ‘scent’ •  Links and category names – Don’t make up words! •  Provide feedback – Scent getting stronger •  Gain vs cost – Good content, easy to find From Code to Product Lecture 3 — UI Principles — Slide 92 gidgreen.com/course
  93. 93. Information scent From Code to Product Lecture 3 — UI Principles — Slide 93 gidgreen.com/course
  94. 94. Information scent From Code to Product Lecture 3 — UI Principles — Slide 94 gidgreen.com/course
  95. 95. Direct manipulation From Code to Product Lecture 3 — UI Principles — Slide 95 gidgreen.com/course Photobygarryknight
  96. 96. Direct manipulation From Code to Product Lecture 3 — UI Principles — Slide 96 gidgreen.com/course
  97. 97. Reversibility From Code to Product Lecture 3 — UI Principles — Slide 97 gidgreen.com/course
  98. 98. Dangerous actions From Code to Product Lecture 3 — UI Principles — Slide 98 gidgreen.com/course
  99. 99. Dangerous actions From Code to Product Lecture 3 — UI Principles — Slide 99 gidgreen.com/course
  100. 100. Common actions From Code to Product Lecture 3 — UI Principles — Slide 100 gidgreen.com/course
  101. 101. Common actions From Code to Product Lecture 3 — UI Principles — Slide 101 gidgreen.com/course
  102. 102. Lecture 3 •  Introduction •  Vision •  Cognition •  Memory •  Action •  Emotion From Code to Product Lecture 3 — UI Principles — Slide 102 gidgreen.com/course
  103. 103. Emotion From Code to Product Lecture 3 — UI Principles — Slide 103 gidgreen.com/course
  104. 104. Waiting… From Code to Product Lecture 3 — UI Principles — Slide 104 gidgreen.com/course
  105. 105. Time limits From Code to Product Lecture 3 — UI Principles — Slide 105 gidgreen.com/course 0.01 sec 0.1 sec 1 sec 10 sec Moment of perception Stylus input on screen Hand–eye coordination Clicks, drags, keys Gap in conversation Waiting without progress bar Concentration on mini-task Wizard step, field entry
  106. 106. Avoid insults From Code to Product Lecture 3 — UI Principles — Slide 106 gidgreen.com/course
  107. 107. Color From Code to Product Lecture 3 — UI Principles — Slide 107 gidgreen.com/course
  108. 108. Color From Code to Product Lecture 3 — UI Principles — Slide 108 gidgreen.com/course
  109. 109. Design From Code to Product Lecture 3 — UI Principles — Slide 109 gidgreen.com/course
  110. 110. But… From Code to Product Lecture 3 — UI Principles — Slide 110 gidgreen.com/course
  111. 111. Feeling served From Code to Product Lecture 3 — UI Principles — Slide 111 gidgreen.com/course •  What you want •  When you want it •  How you like it •  No grunt work •  No criticism •  No “personality” •  Cleanly presented
  112. 112. Books From Code to Product Lecture 3 — UI Principles — Slide 112 gidgreen.com/course

×