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.

Affordances, Constraints, and Feedback in User Experience Design

2,047 views

Published on

Lecture slides on the connection between affordances, constraints, and feedback (audible, tactile, and visual) for the design of interfaces and interactions. Fall 2016 course INFO-I 300: Human-Computer Interaction/Interaction Design. Instructor of record: Omar Sosa-Tzec, PhD Candidate in Informatics (HCI Design). Indiana University Bloomington, School of Informatics and Computing.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Affordances, Constraints, and Feedback in User Experience Design

  1. 1. Affordances,Constraints andFeedback Let’s take one more look at this, and nail it! OmarSosa-Tzec School of Informatics & Computing Indiana University Bloomington info i300 Human-Computer Interaction Fall 2016
  2. 2. Ok,what's theidea?
  3. 3. What your design must have right What the user must get at any point of the interaction flow
  4. 4. What your design must have right What the user must get at any point of the interaction flow Perceived Affordances Constraints
  5. 5. What your design must have right What the user must get at any point of the interaction flow Perceived Affordances Constraints Visual Feedback Audible Feedback Tactile Feedback
  6. 6. What your design must have right What the user must get at any point of the interaction flow Telltheuser whattodo/ Allowhertoact inacertainway Helptheuser avoidmistakes orerrors Visual Feedback Audible Feedback Tactile Feedback
  7. 7. What your design must have right What the user must get at any point of the interaction flow Telltheuser whattodo/ Allowhertoact inacertainway stillandmotion graphics soundcodes, alerts vibration, haptics Helptheuser avoidmistakes orerrors
  8. 8. Aconcrete example: thescrollbar
  9. 9. Itlookslikesomethingphysical, like…graspable! Affordances
  10. 10. Itlookslikesomethingphysical, like…clickableorpushable! Affordances
  11. 11. Itlookslikesomethingdraggable! Affordances
  12. 12. Itlookslikeonecannotpassthislimits! Thewholethinganditscomponents
 haveboundaries! Constraints
  13. 13. Thisisthe“freehorizontalspace”
 inwhichonecandragthebar Constraints
  14. 14. Thisistheportionofvisiblecontent regardingthewhole Constraints
  15. 15. Thisistheportionofcontent notvisible Constraints
  16. 16. Iftheuserdragsthemouseto theright,thescrollbarmoves totheright,andviceversa… Constraints
  17. 17. Iftheuserdragsthemouseto theright,thescrollbarmoves totheright,andviceversa… Constraints Thisisanexampleofmappingbecause
 itrelatesthebar'spositionandwidthto theamountandlocationofthevisible contentonthescreen
  18. 18. Iftheuserdragsthemouseto theright,thescrollbarmoves totheright,andviceversa… Constraints Thisisanexampleofmappingbecause
 itrelatesthebar'spositionandwidthto theamountandlocationofthevisible contentwithrespecttothewholething Workswellwithone'smentalmodel
  19. 19. Ifthemental modeliswidely known,well…
  20. 20. Wherearethe affordances? Relyingonwell-instilled conventionsandmental models? Whentostopornot being“soelegant”?
  21. 21. Skeuomorphicdesignvs.flatdesign
  22. 22. Checkthisout…
  23. 23. WhereamI? Notehowusefulthebreadcrumbsare!
  24. 24. WhatcanIdohere? Notetheneedofclearperceivedaffordances
 forthekeytasks!
  25. 25. WherecanIgofromhere?
  26. 26. GlobalNavigation
  27. 27. LocalNavigation
  28. 28. Signsofthesite'sIA
  29. 29. Someperceivedaffordances Remembertheexampleofthemoneybillsand coinsinvideogames!
  30. 30. Somepsychologicalconstraints Shapes,colors,symbols,conventions,mappings!
  31. 31. Keepinmind…
  32. 32. Emphasisonfunctionality? recognizablebuttons (perceivedaffordance) recognizableconvention recognizablemapping recognizablesymbol comprehensible visualfeedback comprehensible visualfeedback
  33. 33. Emphasisonelegancy,somethingnew? howdifficultistolearnthis typeofmapping? convention? mixofsymbols?
  34. 34. What your design must have right What the user must get at any point of the interaction flow Perceived Affordances Constraints Visual Feedback Audible Feedback Tactile Feedback
  35. 35. What your design must have right What the user must get at any point of the interaction flow Perceived Affordances Constraints Visual Feedback Audible Feedback Tactile Feedback User's mental model
  36. 36. What your design must have right What the user must get at any point of the interaction flow Perceived Affordances Constraints Visual Feedback Audible Feedback Tactile Feedback User's mental model User research:
  37. 37. What your design must have right What the user must get at any point of the interaction flow Perceived Affordances Constraints Visual Feedback Audible Feedback Tactile Feedback User's mental model User research: -Talkandinterviewpeople
  38. 38. What your design must have right What the user must get at any point of the interaction flow Perceived Affordances Constraints Visual Feedback Audible Feedback Tactile Feedback User's mental model User research: -Talkandinterviewpeople -Focusgroups
  39. 39. What your design must have right What the user must get at any point of the interaction flow Perceived Affordances Constraints Visual Feedback Audible Feedback Tactile Feedback User's mental model User research: -Talkandinterviewpeople -Focusgroups -Shadowing
  40. 40. What your design must have right What the user must get at any point of the interaction flow Perceived Affordances Constraints Visual Feedback Audible Feedback Tactile Feedback User's mental model User research: -Talkandinterviewpeople -Focusgroups -Shadowing -ParticipantObservation
  41. 41. What your design must have right What the user must get at any point of the interaction flow Perceived Affordances Constraints Visual Feedback Audible Feedback Tactile Feedback User's mental model User research: -Talkandinterviewpeople -Focusgroups -Shadowing -ParticipantObservation -Analytics
  42. 42. What your design must have right What the user must get at any point of the interaction flow Perceived Affordances Constraints Visual Feedback Audible Feedback Tactile Feedback User's mental model User research: -Talkandinterviewpeople -Focusgroups -Shadowing -ParticipantObservation -Analytics -Secondaryresearch(books&papers)
  43. 43. Micro-break!
  44. 44. Professional Tip
  45. 45. •Add and present URLs properly
  46. 46. •Add and present URLs properly •Use TinyURL,Bitly,Google URL Shortener
  47. 47. •Add and present URLs properly •Use TinyURL,Bitly,Google URL Shortener •Verify that you link works
  48. 48. •Add and present URLs properly •Use TinyURL,Bitly,Google URL Shortener •Verify that you link works •Don't make the reader think (make a usable document)
  49. 49. Micro- activity
  50. 50. •Think of all the concepts,ideas, and exercises that we've seen so far.Please,write down briefly what concept or idea is not clear to you yet. •Include your name (attendance).
  51. 51. Copycat Mini-Project
  52. 52. Balsamiq https://balsamiq.com/
  53. 53. •The general idea: you will make the same flow but now with Balsamiq
  54. 54. •The general idea: you will make the same flow but now with Balsamiq •Read the instructions on Canvas
  55. 55. •The general idea: you will make the same flow but now with Balsamiq •Read the instructions on Canvas •Deadline: Wednesday Oct 5, 11:59 PM
  56. 56. Thanks! @omitzec tzec.com * Some images are taken from the Web for illustration and pedagogical purposes only

×