1.
3 9 7 1.F. {f.
User Interaction Designer
7n. ..mv. .mu . :‘- 1:1‘: r= .I. .n. u-1:; .'u:1 i: -‘. ?.%= .1'n_‘-. r=. IE-. : s’fL~I. ‘n. I.'n. r=. r"'—» "
, . , L - .
HY. ‘ Ya! ‘ BY; ., :'‘= . I a II: I}, :’L‘1_I, L J I 5
TH F 9

2.
AFFORDANCE

3.
Perceived Signal or Clue
that an object may be used
to perform a particular action

4.
Affords Sitting

5.
Affords Gripping

6.
PUSH
IF THAT ooesrw woax
PULL
IF THAT DOESN'T WORK EITHER
IT'S BECAUSE WE'RE CLOSED
an

7.
E‘—‘; JvANGIN
' CW5‘

8.
—~ YANG ‘
EQ. ,»J cmglw f, |’-Y-JV€| D'J: $|'N
‘ T
l I 1%
. v‘ f; }
| _ . L

9.
Physical objects
SIZE
SHAPE
WEIGHT

10.
Web, Mobi| e Interface
DESIGN

11.
5597"! ’
Terms Privacy . ' *' Posledbydomlnicpnrfl ‘H

12.
ELEVEN ACTIONS
Input an Email address
Input a Password
Click the Question mark icon
Click the Log in button
Click the Sign up link
Click the Terms link
Click the Privacy link
Click the Posted by dominiccperri link
Click dominiccperri’s avatar image
Click the Search Tumblr input field
Hit enter to search for the input term

13.
TYPES
Explicit
Pattern
Meta phorical
Hidden
False
Negative

14.
EXPLICIT
Signaled by language
or
an object's physical appearance

15.
Paying is easier our new
Mobile number (ex. 555-555-5555)
Text Yourself the App Link
By'o'on1'ni1g, youconfrmflIisisyoum: r|beIf‘ :37; :52,
roceivoatoxt. Standard messafilg rates
‘ Iflhono Q: Andmld

16.
c; |icK +0 play +hc video

17.
PATTERN
Established system for
Communicating
They rely on the wealth of time already spent
interacting with apps, websites and other interfaces

18.
Q envato S 1 ud jo cnsoomzs - cnsnz sznvncz NPOSYOLOVSKI -
A commt{r"1-i’§y. __qj_. _t, ;_a_L3g; gi§cc '
and dgyglgpers avanIabI
1. Choose your provider 2. Supply your brief @ 3. Get work done
v: 's: A 5 ”. '’? a V? ??” J
. pr" I
E‘-‘. ’- Qsz‘. -4:33 3
. ‘
'. H
Vndeo H. Ammalnon Ecommuu 6. CMS Development Mobile 6. Apps Websites 3. Programmmg

19.
Element
Navigation bar
Links
Logo
Link in top-right corner
“Categories” drop—down
Magnifying glass icon
Content modules
Affordance type
Pattern
Pattern
Pattern
Pattern
Pattern
Pattern metaphor
Pattern
Affords
Navigating the website
Clicking
Returning to home page
Managing account
Accessing more options
Searching
Clicking modules

20.
P{W>FEH

21.
Graphic De_sign
IS In love Wlth
I-Ielvetica
happy graphic design day!
m aafreen bano
_T r

22.
0/1115} Send
Gr_aphic De_sign
IS in love with
I-Iclvctica
happy graphic design day!
A_.
aafreen bano
W

23.
cocoa?
Go to gym
Buy groceries
Mow lawn
Get haircut
Pick up dry cleaning
Buy anniversary present
Reply to moming emails
Call mom
Collect coffee beans

24.
HIDDEN AFFORDANCES
‘
0-'4
0.
IQ; -u.
Swipe to complete Pinch to change list Heatmap shows priority Pull to create item

25.
Suitable only when the user has some buy-in
W

26.
METAPHORICAL
Communicate using
Real world objects

27.
METAPHORICAL
{J} J
C? db cg:
K

28.
FALSE
Seems to afford a particular capability
BUT
actually affords a different capability
or NONE

29.
V 156 likes
ca 13 buckets
‘
6
I
III
0 1.622 vnews
B Share
Tags
ipad
motorcycle
404
salt city builds
404 page
retina

30.
Sizes (px): 48

31.
NEGATIVE
Doesn't afford
any capabilities at the moment

32.
3;
_. ,/3 .4
TO:
Cancel

33.
H(“l0
Much: %
To:
3 W

34.
+Ramakrishna Gmail
Images
Goog| e+ notifications
Previously read Q
vfiamakrishna Gmail
Images : :: Cl
Googleo notifications
View posts In Googiev
Previously read 0

35.
Type
Explicit
Pattem
Hidden
Metaphorical
False
Negative
Pros
Unambiguous; low risk
of user missing the
affordance
Communicates
affordance quickly and
cleanly
Clean interface
Easiest way to
communicate complex
affordances
None
Helps prevent
frustration by signalling
that an element has no
affordance
Cons
Messier interface;
might seem
patronizing to some
users
Relies on previous
experience with
similar interfaces
Capabilities might not
be discovered
Metaphors mean
different things to
different people
Wastes the user's
time by suggesting
affordances that
aren't there
If an element has no
affordance. it might
not be necessary
Use case
Low-tech audience; to
explain unintuitive
affordances
When patterns are firmly
established; when audience
is tech-sawy
lnessential capabilities; when
user has enough buy-in to
experiment
When affordances are too
complex to explain without
metaphors
Avoid false affordance
When supporting information
and elements are necessary
but do not have capabilities

36.
% SIGN UP FOR FREE LOG N
0
Create your online portfolio
without learning code. For free.
A free, s'Tp'2-to-use sc'Jt': 't to a ow creative fc < to showcase the" wc'l<.
Get Started Now >

37.
HELP USERS UNDERSTAND
and subtly encourage them to take one action over another

38.
Thank you