User Interface Principles

808 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
808
On SlideShare
0
From Embeds
0
Number of Embeds
56
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

User Interface Principles

  1. 1. 3 — User Interface Principles From Code to Product gidgreen.com/course
  2. 2. Lecture 3•  Introduction•  Vision•  Cognition•  Memory•  Action•  EmotionFrom Code to Product Lecture 3 — UI Principles — Slide 2 gidgreen.com/course
  3. 3. User Interface“The aspects of a computer system orprogram which can be seen (or heard orotherwise perceived) by the human user,and the commands and mechanisms theuser uses to control its operation and inputdata.” — Free On-Line Dictionary of ComputingFrom 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 architectureFrom Code to Product Lecture 3 — UI Principles — Slide 4 gidgreen.com/course
  5. 5. Layers of a product CoreFrom Code to Product Lecture 3 — UI Principles — Slide 5 gidgreen.com/course
  6. 6. The problem I want to see MOV r0, #10 this guy’s face ADD r0, r0, r1 How do we bridge this gap?From Code to Product Lecture 3 — UI Principles — Slide 6 gidgreen.com/course
  7. 7. The solution I want to see MOV r0, #10 this guy’s face ADD r0, r0, r1 I can use Skype Function call in on my mobile Skype app I will press his Touch event name in the app detectedFrom Code to Product Lecture 3 — UI Principles — Slide 7 gidgreen.com/course
  8. 8. Channels of communication Pressing buttons Flashing lights Pointing on screen Image on screen Talking and singing Playing sound Being photographed Vibration Moving the deviceFrom Code to Product Lecture 3 — UI Principles — Slide 8 gidgreen.com/course
  9. 9. Lecture 3•  Introduction•  Vision•  Cognition•  Memory•  Action•  EmotionFrom Code to Product Lecture 3 — UI Principles — Slide 9 gidgreen.com/course
  10. 10. VisionFrom Code to Product Lecture 3 — UI Principles — Slide 10 gidgreen.com/course
  11. 11. ProximityFrom Code to Product Lecture 3 — UI Principles — Slide 11 gidgreen.com/course
  12. 12. SimilarityFrom Code to Product Lecture 3 — UI Principles — Slide 12 gidgreen.com/course
  13. 13. SimilarityFrom Code to Product Lecture 3 — UI Principles — Slide 13 gidgreen.com/course
  14. 14. ProximityFrom Code to Product Lecture 3 — UI Principles — Slide 14 gidgreen.com/course
  15. 15. SimilarityFrom Code to Product Lecture 3 — UI Principles — Slide 15 gidgreen.com/course
  16. 16. SimilarityFrom Code to Product Lecture 3 — UI Principles — Slide 16 gidgreen.com/course
  17. 17. ContinuityFrom Code to Product Lecture 3 — UI Principles — Slide 17 gidgreen.com/course
  18. 18. SymmetryFrom Code to Product Lecture 3 — UI Principles — Slide 18 gidgreen.com/course
  19. 19. Continuity and SymmetryFrom Code to Product Lecture 3 — UI Principles — Slide 19 gidgreen.com/course
  20. 20. AmbiguityFrom Code to Product Lecture 3 — UI Principles — Slide 20 gidgreen.com/course
  21. 21. GridsFrom Code to Product Lecture 3 — UI Principles — Slide 21 gidgreen.com/course
  22. 22. Photo by Sha Sha Chu Figure and GroundFrom Code to Product Lecture 3 — UI Principles — Slide 22 gidgreen.com/course
  23. 23. Figure and GroundFrom Code to Product Lecture 3 — UI Principles — Slide 23 gidgreen.com/course
  24. 24. Hierarchy 1 5 4 3 2From Code to Product Lecture 3 — UI Principles — Slide 24 gidgreen.com/course
  25. 25. MovementFrom Code to Product Lecture 3 — UI Principles — Slide 25 gidgreen.com/course
  26. 26. Tunnel Vision Photo by Ali KhurshidFrom Code to Product Lecture 3 — UI Principles — Slide 26 gidgreen.com/course
  27. 27. Tunnel VisionFrom 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 Thank you for your reservation. Sushi Samba Date Tue 6 Jan 245 Park Avenue South (212) 475–9377 Time 8.00pm Latest 8.15pm People 4 Table Indoors Minimum $50/personFrom Code to Product Lecture 3 — UI Principles — Slide 29 gidgreen.com/course
  30. 30. Structure Thank you for your reservation. Sushi Samba 245 Park Avenue South (212) 475–9377 Date Tue 6 Jan Time 8.00pm Latest 8.15pm People 4 Table Indoors Minimum $50/personFrom Code to Product Lecture 3 — UI Principles — Slide 30 gidgreen.com/course
  31. 31. ProminenceFrom Code to Product Lecture 3 — UI Principles — Slide 31 gidgreen.com/course
  32. 32. Prominence 1 2 3 4From Code to Product Lecture 3 — UI Principles — Slide 32 gidgreen.com/course
  33. 33. SequenceSource: xkcd.comFrom Code to Product Lecture 3 — UI Principles — Slide 33 gidgreen.com/course
  34. 34. SequenceFrom Code to Product Lecture 3 — UI Principles — Slide 34 gidgreen.com/course
  35. 35. SequenceFrom Code to Product Lecture 3 — UI Principles — Slide 35 gidgreen.com/course
  36. 36. SequenceFrom Code to Product Lecture 3 — UI Principles — Slide 36 gidgreen.com/course
  37. 37. SequenceFrom Code to Product Lecture 3 — UI Principles — Slide 37 gidgreen.com/course
  38. 38. Clutter Photo by Metro CentricFrom Code to Product Lecture 3 — UI Principles — Slide 38 gidgreen.com/course
  39. 39. ClutterFrom Code to Product Lecture 3 — UI Principles — Slide 39 gidgreen.com/course
  40. 40. Minimalism“Perfection is achieved, notwhen there is nothing more toadd, but when there is nothingleft to take away.” — Antoine de Saint-ExupéryFrom Code to Product Lecture 3 — UI Principles — Slide 40 gidgreen.com/course
  41. 41. Minimalism The face of a $200b companyFrom Code to Product Lecture 3 — UI Principles — Slide 41 gidgreen.com/course
  42. 42. Visual affordance Source: ChrisElyea.comFrom Code to Product Lecture 3 — UI Principles — Slide 42 gidgreen.com/course
  43. 43. Visual affordanceFrom 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 offFrom Code to Product Lecture 3 — UI Principles — Slide 44 gidgreen.com/course
  45. 45. Lecture 3•  Introduction•  Vision•  Cognition•  Memory•  Action•  EmotionFrom Code to Product Lecture 3 — UI Principles — Slide 45 gidgreen.com/course
  46. 46. CognitionConsider babies Ben and Sam.They were born to the same woman,on the same day, in the same monthand the same year.Yet theyre not twins.How can this be?From Code to Product Lecture 3 — UI Principles — Slide 46 gidgreen.com/course
  47. 47. The ideal interfaceFrom Code to Product Lecture 3 — UI Principles — Slide 47 gidgreen.com/course
  48. 48. Implementation modelFrom Code to Product Lecture 3 — UI Principles — Slide 48 gidgreen.com/course
  49. 49. Mental modelFrom Code to Product Lecture 3 — UI Principles — Slide 49 gidgreen.com/course
  50. 50. Talk to peopleFrom Code to Product Lecture 3 — UI Principles — Slide 50 gidgreen.com/course
  51. 51. MetaphorsFrom Code to Product Lecture 3 — UI Principles — Slide 51 gidgreen.com/course
  52. 52. Overly literal metaphorsFrom Code to Product Lecture 3 — UI Principles — Slide 52 gidgreen.com/course
  53. 53. Mapping Source: UXHero.comFrom Code to Product Lecture 3 — UI Principles — Slide 53 gidgreen.com/course
  54. 54. MappingFrom Code to Product Lecture 3 — UI Principles — Slide 54 gidgreen.com/course
  55. 55. Unnecessary burdensFrom Code to Product Lecture 3 — UI Principles — Slide 55 gidgreen.com/course
  56. 56. Unnecessary burdens adminapps.utep.edu/changepasswordFrom Code to Product Lecture 3 — UI Principles — Slide 56 gidgreen.com/course
  57. 57. Examples + DefaultsFrom Code to Product Lecture 3 — UI Principles — Slide 57 gidgreen.com/course
  58. 58. InterruptionsFrom Code to Product Lecture 3 — UI Principles — Slide 58 gidgreen.com/course
  59. 59. InterruptionsFrom Code to Product Lecture 3 — UI Principles — Slide 59 gidgreen.com/course
  60. 60. Lecture 3•  Introduction•  Vision•  Cognition•  Memory•  Action•  EmotionFrom Code to Product Lecture 3 — UI Principles — Slide 60 gidgreen.com/course
  61. 61. MemoryFrom Code to Product Lecture 3 — UI Principles — Slide 61 gidgreen.com/course
  62. 62. Two types of memory 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 disksFrom Code to Product Lecture 3 — UI Principles — Slide 62 gidgreen.com/course
  63. 63. ModesFrom Code to Product Lecture 3 — UI Principles — Slide 63 gidgreen.com/course
  64. 64. ModesFrom Code to Product Lecture 3 — UI Principles — Slide 64 gidgreen.com/course
  65. 65. Modes Drawing SelectionFrom Code to Product Lecture 3 — UI Principles — Slide 65 gidgreen.com/course
  66. 66. ModesFrom Code to Product Lecture 3 — UI Principles — Slide 66 gidgreen.com/course
  67. 67. Context Photo by jimaFrom Code to Product Lecture 3 — UI Principles — Slide 67 gidgreen.com/course
  68. 68. ContextFrom Code to Product Lecture 3 — UI Principles — Slide 68 gidgreen.com/course
  69. 69. Instructions Image by ZoagliFrom Code to Product Lecture 3 — UI Principles — Slide 69 gidgreen.com/course
  70. 70. InstructionsFrom Code to Product Lecture 3 — UI Principles — Slide 70 gidgreen.com/course
  71. 71. InstructionsFrom Code to Product Lecture 3 — UI Principles — Slide 71 gidgreen.com/course
  72. 72. ComparisonsFrom Code to Product Lecture 3 — UI Principles — Slide 72 gidgreen.com/course
  73. 73. Offer, don’t askFrom Code to Product Lecture 3 — UI Principles — Slide 73 gidgreen.com/course
  74. 74. Offer, don’t ask Car$ /bin/set-temperature 73f Temperature set OK Car$ /bin/rear-demister on COMMAND NOT RECOGNIZED From Code to Product Lecture 3 — UI Principles — Slide 74 gidgreen.com/course
  75. 75. OverviewsFrom Code to Product Lecture 3 — UI Principles — Slide 75 gidgreen.com/course
  76. 76. AutosuggestFrom Code to Product Lecture 3 — UI Principles — Slide 76 gidgreen.com/course
  77. 77. Show what’s oldFrom Code to Product Lecture 3 — UI Principles — Slide 77 gidgreen.com/course
  78. 78. Show what’s newFrom Code to Product Lecture 3 — UI Principles — Slide 78 gidgreen.com/course
  79. 79. Consistency Source: bhc3.comFrom Code to Product Lecture 3 — UI Principles — Slide 79 gidgreen.com/course
  80. 80. Learned mappingFrom Code to Product Lecture 3 — UI Principles — Slide 80 gidgreen.com/course
  81. 81. Learned affordanceFrom Code to Product Lecture 3 — UI Principles — Slide 81 gidgreen.com/course
  82. 82. Learned idiomsFrom Code to Product Lecture 3 — UI Principles — Slide 82 gidgreen.com/course
  83. 83. Lecture 3•  Introduction•  Vision•  Cognition•  Memory•  Action•  EmotionFrom Code to Product Lecture 3 — UI Principles — Slide 83 gidgreen.com/course
  84. 84. Action http://www.85qm.de/up/BigRedButton.swfFrom Code to Product Lecture 3 — UI Principles — Slide 84 gidgreen.com/course
  85. 85. Goals and subgoals Make my friend feel better Wait for flowers Call Send flowers to friend online to arrive friend upFind a flowers website Order the flowers Open web Go to Type in Choose the best site browser google.com “flowers” f l o w e r sFrom Code to Product Lecture 3 — UI Principles — Slide 85 gidgreen.com/course
  86. 86. Execute—Evaluate Try Was the Define Next something subgoal YES! subgoal NO subgoal… sensible reached?From Code to Product Lecture 3 — UI Principles — Slide 86 gidgreen.com/course
  87. 87. Execute—Evaluate Choose the best site Wikipedia Looks OK, but Seems to be UK only first. Back! only. Back! Seems really Looks perfect. pricey. Back! We’re done!From Code to Product Lecture 3 — UI Principles — Slide 87 gidgreen.com/course
  88. 88. 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 logsFrom Code to Product Lecture 3 — UI Principles — Slide 88 gidgreen.com/course
  89. 89. EvaluationFrom Code to Product Lecture 3 — UI Principles — Slide 89 gidgreen.com/course
  90. 90. 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 findFrom Code to Product Lecture 3 — UI Principles — Slide 90 gidgreen.com/course
  91. 91. Information scentFrom Code to Product Lecture 3 — UI Principles — Slide 91 gidgreen.com/course
  92. 92. Information scentFrom Code to Product Lecture 3 — UI Principles — Slide 92 gidgreen.com/course
  93. 93. Direct manipulation Photo by garryknightFrom Code to Product Lecture 3 — UI Principles — Slide 93 gidgreen.com/course
  94. 94. Direct manipulationFrom Code to Product Lecture 3 — UI Principles — Slide 94 gidgreen.com/course
  95. 95. ReversibilityFrom Code to Product Lecture 3 — UI Principles — Slide 95 gidgreen.com/course
  96. 96. Dangerous actionsFrom Code to Product Lecture 3 — UI Principles — Slide 96 gidgreen.com/course
  97. 97. Dangerous actionsFrom Code to Product Lecture 3 — UI Principles — Slide 97 gidgreen.com/course
  98. 98. Common actionsFrom Code to Product Lecture 3 — UI Principles — Slide 98 gidgreen.com/course
  99. 99. Common actionsFrom Code to Product Lecture 3 — UI Principles — Slide 99 gidgreen.com/course
  100. 100. Lecture 3•  Introduction•  Vision•  Cognition•  Memory•  Action•  EmotionFrom Code to Product Lecture 3 — UI Principles — Slide 100 gidgreen.com/course
  101. 101. EmotionFrom Code to Product Lecture 3 — UI Principles — Slide 101 gidgreen.com/course
  102. 102. Waiting…From Code to Product Lecture 3 — UI Principles — Slide 102 gidgreen.com/course
  103. 103. Time limits Moment of perception 0.01 sec Stylus input on screen Hand–eye coordination 0.1 sec Clicks, drags, keys Gap in conversation 1 sec Waiting without progress bar Concentration on mini-task 10 sec Wizard step, field entryFrom Code to Product Lecture 3 — UI Principles — Slide 103 gidgreen.com/course
  104. 104. Avoid insultsFrom Code to Product Lecture 3 — UI Principles — Slide 104 gidgreen.com/course
  105. 105. ColorFrom Code to Product Lecture 3 — UI Principles — Slide 105 gidgreen.com/course
  106. 106. ColorFrom Code to Product Lecture 3 — UI Principles — Slide 106 gidgreen.com/course
  107. 107. DesignFrom Code to Product Lecture 3 — UI Principles — Slide 107 gidgreen.com/course
  108. 108. But…From Code to Product Lecture 3 — UI Principles — Slide 108 gidgreen.com/course
  109. 109. Feeling served •  What you want •  When you want it •  How you like it •  No grunt work •  No criticism •  No “personality” •  Cleanly presentedFrom Code to Product Lecture 3 — UI Principles — Slide 109 gidgreen.com/course
  110. 110. BooksFrom Code to Product Lecture 3 — UI Principles — Slide 110 gidgreen.com/course
  111. 111. MemoryFrom Code to Product Lecture 3 — UI Principles — Slide 111 gidgreen.com/course

×