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
andFeedback
Let’s take one more look at this, and nail it!
OmarSosa-Tzec
School of Informatics & C...
Ok,what's
theidea?
What your design
must have right
What the user must get at any
point of the interaction flow
What your design
must have right
What the user must get at any
point of the interaction flow
Perceived
Affordances
Constra...
What your design
must have right
What the user must get at any
point of the interaction flow
Perceived
Affordances
Constra...
What your design
must have right
What the user must get at any
point of the interaction flow
Telltheuser
whattodo/
Allowhe...
What your design
must have right
What the user must get at any
point of the interaction flow
Telltheuser
whattodo/
Allowhe...
Aconcrete
example:
thescrollbar
Itlookslikesomethingphysical,
like…graspable!
Affordances
Itlookslikesomethingphysical,
like…clickableorpushable!
Affordances
Itlookslikesomethingdraggable!
Affordances
Itlookslikeonecannotpassthislimits!
Thewholethinganditscomponents

haveboundaries!
Constraints
Thisisthe“freehorizontalspace”

inwhichonecandragthebar
Constraints
Thisistheportionofvisiblecontent
regardingthewhole
Constraints
Thisistheportionofcontent
notvisible
Constraints
Iftheuserdragsthemouseto
theright,thescrollbarmoves
totheright,andviceversa…
Constraints
Iftheuserdragsthemouseto
theright,thescrollbarmoves
totheright,andviceversa…
Constraints
Thisisanexampleofmappingbecause

...
Iftheuserdragsthemouseto
theright,thescrollbarmoves
totheright,andviceversa…
Constraints
Thisisanexampleofmappingbecause

...
Ifthemental
modeliswidely
known,well…
Wherearethe
affordances?
Relyingonwell-instilled
conventionsandmental
models?
Whentostopornot
being“soelegant”?
Skeuomorphicdesignvs.flatdesign
Checkthisout…
WhereamI?
Notehowusefulthebreadcrumbsare!
WhatcanIdohere?
Notetheneedofclearperceivedaffordances

forthekeytasks!
WherecanIgofromhere?
GlobalNavigation
LocalNavigation
Signsofthesite'sIA
Someperceivedaffordances
Remembertheexampleofthemoneybillsand
coinsinvideogames!
Somepsychologicalconstraints
Shapes,colors,symbols,conventions,mappings!
Keepinmind…
Emphasisonfunctionality?
recognizablebuttons
(perceivedaffordance)
recognizableconvention
recognizablemapping
recognizable...
Emphasisonelegancy,somethingnew?
howdifficultistolearnthis
typeofmapping?
convention?
mixofsymbols?
What your design
must have right
What the user must get at any
point of the interaction flow
Perceived
Affordances
Constra...
What your design
must have right
What the user must get at any
point of the interaction flow
Perceived
Affordances
Constra...
What your design
must have right
What the user must get at any
point of the interaction flow
Perceived
Affordances
Constra...
What your design
must have right
What the user must get at any
point of the interaction flow
Perceived
Affordances
Constra...
What your design
must have right
What the user must get at any
point of the interaction flow
Perceived
Affordances
Constra...
What your design
must have right
What the user must get at any
point of the interaction flow
Perceived
Affordances
Constra...
What your design
must have right
What the user must get at any
point of the interaction flow
Perceived
Affordances
Constra...
What your design
must have right
What the user must get at any
point of the interaction flow
Perceived
Affordances
Constra...
What your design
must have right
What the user must get at any
point of the interaction flow
Perceived
Affordances
Constra...
Micro-break!
Professional
Tip
•Add and present URLs properly
•Add and present URLs properly
•Use TinyURL,Bitly,Google URL
Shortener
•Add and present URLs properly
•Use TinyURL,Bitly,Google URL
Shortener
•Verify that you link works
•Add and present URLs properly
•Use TinyURL,Bitly,Google URL
Shortener
•Verify that you link works
•Don't make the reader ...
Micro-
activity
•Think of all the concepts,ideas,
and exercises that we've seen so
far.Please,write down briefly
what concept or idea is n...
Copycat
Mini-Project
Balsamiq
https://balsamiq.com/
•The general idea: you will make
the same flow but now with
Balsamiq
•The general idea: you will make
the same flow but now with
Balsamiq
•Read the instructions on Canvas
•The general idea: you will make
the same flow but now with
Balsamiq
•Read the instructions on Canvas
•Deadline: Wednesday...
Thanks!
@omitzec
tzec.com
* Some images are taken from the Web for
illustration and pedagogical purposes only
Affordances, Constraints, and Feedback in User Experience Design
Affordances, Constraints, and Feedback in User Experience Design
Upcoming SlideShare
Loading in …5
×

Affordances, Constraints, and Feedback in User Experience Design

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.

  • 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

×