affordances, constraints, and feedback in user experience design
TRANSCRIPT
Affordances, Constraints and FeedbackLet’s take one more look at this, and nail it!
Omar Sosa-Tzec School of Informatics & Computing Indiana University Bloomington
info i300 Human-Computer Interaction Fall 2016
Ok, what's the idea?
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
Constraints
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
What your design must have right
What the user must get at any point of the interaction flow
Tell the user what to do /
Allow her to act in a certain way
Help the user avoid mistakes
or errors
Visual Feedback
Audible Feedback
Tactile Feedback
What your design must have right
What the user must get at any point of the interaction flow
Tell the user what to do /
Allow her to act in a certain way
still and motion graphics
sound codes, alerts
vibration, haptics
Help the user avoid mistakes
or errors
A concrete example: the scrollbar
It looks like something physical, like… graspable!
Affordances
It looks like something physical, like… clickable or pushable!
Affordances
It looks like something draggable!
Affordances
It looks like one cannot pass this limits! The whole thing and its components
have boundaries!
Constraints
This is the “free horizontal space” in which one can drag the bar
Constraints
This is the portion of visible content regarding the whole
Constraints
This is the portion of content not visible
Constraints
If the user drags the mouse to the right, the scrollbar moves to the right, and vice versa…
Constraints
If the user drags the mouse to the right, the scrollbar moves to the right, and vice versa…
Constraints
This is an example of mapping because
it relates the bar's position and width to
the amount and location of the visible
content on the screen
If the user drags the mouse to the right, the scrollbar moves to the right, and vice versa…
Constraints
This is an example of mapping because
it relates the bar's position and width to
the amount and location of the visible
content with respect to the whole thing
Works well with one's mental model
If the mental model is widely known, well…
Where are the affordances?
Relying on well-instilled conventions and mental models?
When to stop or not being “so elegant”?
Skeuomorphic design vs. flat design
Check this out…
Where am I?
Note how useful the breadcrumbs are!
What can I do here?
Note the need of clear perceived affordances
for the key tasks!
Where can I go from here?
Global Navigation
Local Navigation
Signs of the site's IA
Some perceived affordances
Remember the example of the money bills and
coins in videogames!
Some psychological constraints
Shapes, colors, symbols, conventions, mappings!
Keep in mind…
Emphasis on functionality?
recognizable buttons (perceived affordance)
recognizable convention
recognizable mapping
recognizable symbol
comprehensible visual feedback
comprehensible visual feedback
Emphasis on elegancy, something new?
how difficult is to learn this type of mapping?convention?
mix of symbols?
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
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
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:
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: -Talk and interview people
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: -Talk and interview people
- Focus groups
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: -Talk and interview people
- Focus groups - Shadowing
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: -Talk and interview people
- Focus groups - Shadowing
-Participant Observation
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: -Talk and interview people
- Focus groups - Shadowing
-Participant Observation - Analytics
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: -Talk and interview people
- Focus groups - Shadowing
-Participant Observation - Analytics
-Secondary research (books & papers)
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 think (make a usable document)
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 not clear to you yet.
•Include your name (attendance).
Copycat Mini-Project
•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 Oct 5, 11:59 PM
Thanks!
@omitzec tzec.com
* Some images are taken from the Web for illustration and pedagogical purposes only